I dont really have anything to show, but i'll try to explain.
I am using HTML and CSS and i have a background image the size of the moon. (3840x18509 pixels). How can i add this as a background on the page, get it to scale automatically to the screen, and make it scrollable? What i mean by that is that i want to be able to scroll all the way to the bottom of the long picture. using :cover is not doing it, and when i set height:18509px; The image gets wider than it's supposed to be so that it cuts out on the sides.
I want the website to be as wide as the original picture, and as high as the original picture. I want to show the entire picture in a way that it fits the screen width, but must be scrolled downwards to reach the bottom. Thanks in advance.
body, html {
margin: 0;
padding: 0;
border: 0;
background-image: url("HuronWP.png");
background-repeat: no-repeat;
background-size: cover; I dont want it to cut the image height,
i want to scroll down to see the rest.
}
}
If you know the exact size of the image you simply have to set the aspect-ratio of <body> to match the image: body { aspect-ratio: 3840 / 18509; }
body {
margin: 0;
background-image: url('https://www.tacoshy.de/stackoverflow/3840x18509.jpg');
aspect-ratio: 3840 / 18509;
}
Alternativly you could insert the image directly and use width: 100% to fit the screen while maintaining its aspect-ratio.
img {
width: 100%;
display: block;
}
/* for styling purpose only */
body {
margin: 0;
}
<img src="https://www.tacoshy.de/stackoverflow/3840x18509.jpg">
I think you want to scroll you image whenever it becomes wider or longer than your page. You can do this simply using css overflow property.
overflow:scroll;
Just adding this to our code it will work fine.
Whenever the image height or width will be larger than you container then it will automatically be a scrollable.
Here I have created a div class and put my image inside this div.
<div class="image">
<img
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
alt="img"
/>
</div>
Now I am changing the height and width of my <img> so that it will overflow the <div> class.
height and width of image.
img {
height: 1000px;
width: 1000px;
}
height and width of outer div
.image{
height: 900px;
width: 900px;
overflow: scroll;
}
This property will be valid only when the outer div must have smaller height and width than the inner,
Related
I've been trying to find an answer online so I didn't have to post, but I can't find a solution!
I'm using a carousel from bootstrap, and my images won't fit. I put the carousel inside a div named "slide". I set width and height on slide, and put a background color to make it easier to see. When I set width in percentage a on my img it resizes to take up the whole width of it's parent container. But when I set height on the img, it makes the image huge!! I want to stretch the image to fit, I don't care about keeping the original ratio. Also if I set the height in pixels or vh it has an affect, the only thing that doesn't work is percentages.
Guys, what am I missing here?
Width 100%
Code
Height 100%
Code
.slide {
width: 300px;
height: 300px;
overflow: hidden;
background: #000;
}
.slide img {
width: 100%;
height: 100%;
object-fit: contain; /* When you use Contain proparty you can see full image with black background*/
object-fit: cover; /* When you use cover proparty you can see it's cover a box as per main div width */
}
<!-- Here I use Display flex instant of float right -->
<div class="slide">
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>
My suggestion is You can use cover CSS.
thanks for helping!
I set 2 images of -
800X1000
Image 1 :
Set in a container that set to :
width: 100%.
The image I also set to -
width: 100%
Image 2 :
Set without a container, without any special order.
I set a border to my container -
And when resizing the screen, to about the 800px mark -
The container started to shrink and didn't take the 100% width I set.
(Therefore , the image is also shrunk).
Once I removed image number 2, it as expected - take the full 100% width of the screen.
Why is that?
Why once I had 2 images inside, the second Image basically cause the to shrink?
This is my code ( nothing special, 2 CSS lines)
.alon {
width: 100%;
border: 5px solid green;
}
.alon img {
width: 100%;
}
<div class="alon">
<img src="images/donald.jpg" alt="">
</div>
<img src="images/donald.jpg">
HTML above.
Your second image has no styling, you basically just dropped an image in the body container and never specified a width for it.
With the code you provided, the second image will keep its default width, while the image in the .alon div will take the width of its parent container. In this case, the image in the .alon div is taking 100% width of the browser, and the image within is taking 100% width of the .alon div.
I've included an example below that applies 100% width to the second image as well.
body img {
width: 100%;
}
* {
box-sizing: border-box;
}
.alon {
width: 100%;
border: 5px solid green;
padding: 0px;
}
.alon img {
width: 100%;
padding: 0px;
}
body img {
width: 100%;
}
<div class="alon">
<img src="https://cdn.pixabay.com/photo/2020/10/28/11/08/castle-5693094__340.jpg" alt="">
</div>
<img src="https://cdn.pixabay.com/photo/2020/10/28/11/08/castle-5693094__340.jpg">
After running the code you will notice that the second image takes 100% width of the browser like your first image.
If you delete the following CSS:
body img {
width: 100%;
}
The second image will go back to its default size.
Additionally, to further answer your question, since your first image is enclosed in a div that has a 5px green border, the default box-sizing on a browser will not calculate your border as part of the declared width of 100%, which in turn, will offset your image container by 5px.
To make the browser calculate the 5px border as part of the container width of 100% you can apply a universal box-sizing: border-box to your document.
I've included this in the snippet above for reference.
I have 2 div's named first and second and I have set the width and height of them as 100%
.first{
width : 100%;
height : 100%;
}
.second{
width : 100%;
height : 100%;
}
now I would like to add an image in each div. These images should fill in the entire div.
<img src="someimage.png" width="100%" height="100%"/>
My problem is the image should not be stretched it should be filled the entire screen. I have used img img-responsive classes to achieve this. The image is now getting filled without stretching but when resized it is getting resized uniformly and the height of it is also getting decreased hence the image's height is now not getting filled 100%. Is there any way to achieve width and height of an image to cover the entire screen without stretching and decreasing the height?
Check this out, and you should use width: 100% beside min-height: 100% but i recommend you to use background-image with background-size: cover
.first{
width : 100%;
height : 100%;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.first img {
width: 100%;
min-height: 100%;
}
<div class="first">
<img alt="" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97500&w=500&h=500"/>
</div>
jsFiddle
I use imgLiquid this is a jQuery Plugin to resize images to fit in a container.
https://github.com/karacas/imgLiquid
It's super easy to use and light weight.
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html
I want a <img> whose width is 40% of the page, and it gets stretched.
How can I resize it without stretching?
For example, if I have a image whose file originally looks like this:
____8888________
____8888________
____8888________
In my webpage, normally, it should looks like:
____8888________
____8888________
____8888________
As soon as I make the browser a little more narrow, the max-width(let's say 10 characters in this example) would take effect.
When that happens, I would like it to be:
____8888__
____8888__
____8888__
(just like it's been cut from the right side. Of course from both sides are better),
Rather than:
__888_____
__888_____
__888_____
Any trick (putting it into a <div>'s background) is okay.
Width and height are unknown.
Thank you all for your previous answers, but, sorry, I think I haven't put enough emphasis on "After limiting its width to 40% of the page", which means before width-limiting it should looks normal.
The trick is to put the image into a containing block element, eg a DIV. Once inside set the width of the image to 100%, this will instruct the browser to fit the image width flush with the left and right edges of the DIV.
You then control the width of the DIV via CSS, I find keeping the image in a block element makes manipulation much easier when creating fluid layouts.
Example:
img.stretchy {
width: 100%; /*Tells image to fit to width of parent container*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" />
</div>
If you wan the image to be clipped/cropped in any way, set it to be larger than it's parent, and set the parent's overflow css to hidden.
Example:
img.clipped {
width: 150%; /*Scales image to 150% width of parent container*/
float: left; /*Floats image to left of container - clipping right hand side*/
float: right; /*Floats image to right of container - clipping left hand side*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
overflow: hidden;
}
<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" />
</div>
Hope this helps...
Add this class to the img html tag, it will keep the image as it is, but will take the necessary specified space ie.40% x 40% without stretching the image
.img{
width:40%;
height:40%; //change to whatever your choice
/*Scale down will take the necessary specified space that is 40% x 40% without stretching the image*/
object-fit:scale-down;
}
Here's a few options. (see the demo of all these options here: http://jsfiddle.net/Squeegy/Gcrdu/ )
The first as a plain image of unknown size. This displays at whatever size it happens to be.
<img src="http://www.google.com/logos/classicplus.png">
But as it turns out, you can preserve the aspect ratio of an image if you only set the width, or only the height. The other dimension will adjust itself to keep things from stretching.
// HTML
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink">
// CSS
img.aspectshrink {
width: 100px;
}
But when you use CSS background images you can do some creative cropping based on where anchor the background.
This says "Go"
// HTML
<div class="cropped-right"></div>
// CSS
.cropped-right {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: left center;
background-repeat: no-repeat;
border: 1px solid red;
}
And this says "gle":
// HTML
<div class="cropped-left"></div>
// CSS
.cropped-left {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: right center;
background-repeat: no-repeat;
border: 1px solid red;
};
Try to use ImageResizer.
Here's the link : http://imageresizing.net/
Do you mean cropping the image? If so look into CSS overflow property. Also you could put it into the background and centre it in the div