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
Related
I'm working on a project where I have to give a background-image a full width. The image should become larger as I make the screen larger, and smaller as I make the screen smaller.
This is my code at the moment. It's a footer decoration:
.footerDeco {
background-image: url(../resources/image_geometry_2.svg);
background-repeat: no-repeat;
height: 160px;
background-size: cover;
}
The background-size: cover makes the image adapt to full width, but the height of the image remains 160px no matter what. If I make the height larger, then it's a problem because it doesn't shrink back proportionally as the screen becomes smaller.
I have tried giving it a height auto or a height 100% expecting the height to change proportionally to the width. (I do understand this height is the height of the footer container, but I don't know how to change it otherwise).
I know it would be much easier to use an img tag. But the demands of the project and good practice insist that since this is a decoration, I should use the background-image property. Is it possible? Thanks!
P.S.: There are similar questions that have been answered here, but none of them (as far as I can tell) solve the problem of the image resizing past the constant container height of 16px.
To make the height change proportionally to the width, you can use vw to specify the height, for example:
.rooterDeco {
height: 20vw;
}
maybe for a size of 100% it will work
background-size: 100% 100%;
using percentage makes the element one size relative to the size of the parent element.
You can use aspect-ratio.
.footerDeco {
aspect-ratio: 16 / 9;
background: url(https://www.fillmurray.com/g/300/200);
background-size: cover;
}
<div class="footerDeco"></div>
I have a div that needs to have an aspect ratio if the image is taller than the aspect ratio, but where the height is dependant on the image if the image is wider than the aspect ratio.
An explanation in CSS is shown in the below. I know the CSS below is unrealistic in this case, it's just a way for me to explain what I need better.
If the image is taller than the aspect ratio I would need this CSS:
div {
aspect-ratio: 16/9;
}
If the image is wider than the aspect ratio, I would need this CSS:
div {
width: 100%;
height: auto;
}
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.
I have a square image which I want to fill as much of the users browser as possible without overflow. The problem is that on some devices the width is greater than the height and vice versa. Therefore if I set width as 100% then on some devices this will cause a height overflow. So how can I set the image to load as a square and be 100% width, if the width is smaller than the height and 100% height, if the height is smaller than the width?
Thanks
You can use the vmin value:
http://jsfiddle.net/bt2s86vu/
<div></div>
div {
width: 100vmin;
height: 100vmin;
background: green;
}
Note, that in IE9 you need to use vm instead on vmin: http://caniuse.com/#feat=viewport-units
You can make an image to take full width and height using this -
img{
min-width: 100vw;
min-height: 100vh;
}
I have div with absolute height and width:
<div style="height: 500px; width: 300px;">
I want to put a background image (width 500px; height 1500px ) to fit the width of the DIV, but i want to let overflow the height of the div. I don't want to loose proportions of my image.
Image is generated dynamically, sometimes is height smallest than a div height. I need to be always cover on width, don't care about height.
Is in CSS some way to do it without need of using javascript?
background-size: cover value works only when image height is smaller than div height.
Im finding something like:
background-size: 100% default;
Should be
background-size: 100% auto;
Try:
.element {
background-size: cover
}