img {
width: 100%;
height: auto;
}
The code above resizes the images width with the with of the page, while keeping the same ratio with the height.
Why doesn't
img {
width: auto;
height: 100%;
}
resize the image's height with the pages height, while keeping the same ratio with the width? Is there another way I can have that effect on my image?
May be height is not defined of parent of img. So please put any height to the parent of img then try.
Related
I have a div container which contains an img with height of 311px.
The parent container follows the height of that image, but I want my container to have a height of 532px.
I have set the image CSS to width: 100%; height: 100%; object-fit: cover; so that the image, even small, will still fill the container without any distortion, but I need to make the container to be responsive even when the screen gets smaller, and I've set the height to 532px so when the screen gets smaller, the height of div remains the same.
Is there any way to set a "default" height to div container, but adjusts when screen gets smaller?
here is the code html:
<style>
.inside-img{
object-fit: cover;
width: 100%;
height: 100%;
}
.container{
height: 532px;
}
</style>
<div class="container"><img class="inside-img" src="img.jpg"></div>
thanks in advance.
You should use min-height:300px; this sets the minimum height for your container and can be adjusted
I want to make an image stay at a certain height, but I also want it to stay at the width of the user's screen.
Here's the image's CSS:
#cafe {
max-width: 100%;
height: 700px;
}
Here's the output:
you can try this
#cafe {
width: 100%;
height: 100vh;
}
here the 'vh' means VIEWPORT HEIGHT which automatically takes the user's screen height.
I hava A image in a slider.
it is responsive but the image is to big.
How can i resize it? (but it has to stay responsive)
<img src="switch/3.jpg" class="homeImg">
.homeImg{
width: 100%;
}
You can try using width: 100%; height: auto;. This literally means: set the width of the image to 100% of the page width and maintain its aspect ratio.
When a user loads the page, I want an image to fill the entire screen. What I want is very similar to background-size:cover, but I want to be able to scroll down without the static background.
This is what I have so far:
body {
margin: 0;
}
#bg img {
z-index: -1;
position: absolute;
max-width: 100%;
}
The only problem with this, is that the image height is not restricted to the height of the browser window. height or max-height does not make any difference.
Is there any simple way of achieving this in pure CSS?
Use the vh and vw Viewport-Relative Length units.
#bg img {
height: 100vh;
width: 100vw; /* If you want it to be full width as well as height. */
}
I have an image in a website (the website is responsive). the image should always have 100% height of the parent div (that has a height of 100%) but with aspect ratio.
my example
I tried with CSS:
max-height: 100%;
max-width: 100%;
width: auto!important;
But this way the picture has always 100% height of it's original size. I want it bigger than it's original size, but with aspect ratio.
Change the CSS to:
height: 100%;
display: block;
float: right;
By removing all width references, most if not all browsers will scale it proportionally and keep the aspect ratio. By specifying the height as 100%, it will fit the height of the image to the height of the parent container and stay responsive.
Have you considered changing your CSS to the following?
img{width:100%; height:auto;}
That way all of your images will respond to the width of their parent element and keep their aspect ratio
Use the CSS tags "width" and "height" to make it bigger. For example:
width: 200%;
height: 200%;
Good luck!
*Fiddle Demo