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;
}
Related
How can I have an image take scale the screen while keeping it's aspect ratio in CSS? For example, if I have an image that is taller than it is wide its height should be 100% (and width: auto;). But if the image is wider than it is tall its width should be 100% (and height: auto;).
Can I do this in CSS?
If the height and the width are both 100% than the image is all squished together like so:
If the height and width are both auto, the image scales correctly unless it is smaller than the screen's size, then it leaves gaps around its edges:
You can use object-fit: cover, this ensures that the image doesn't lose its aspect ratio. You can also use a percentage value like width: 70%, and height: auto so the image scales down when resized
I am getting a bunch of image URLs and I am displaying them in my webpage. By default I set all the images to have <img height = "200px" width = "200px">
The issue with this is that some images don't scale and look squished, how do I dynamically scale each image so that it doesn't look squished but is smaller. For example if I have a picture that is 16:9 I'd like it to keep that ratio when making it smaller.
So, you want an image to have width and height of 200px, while maintaining aspect ratio.
If you set height and width in html, it will lead to image not maintaining the aspect ratio.
Instead use CSS.
<img class="myImg" />
In styles.css
.myImg {
max-width: 200px;
max-height: 200px;
}
I wonder if I can set div ratio responsive like an image in css.
For example, I have an image (800px x 400px) and set css is width:100%. When I use desktop screen (widht: 1400px), the image will auto resize and get full width of screen => image size (1400px x 700px).
But element, I have to set both width and height
Is there way to set empty width 800px and height 400px, and it will auto resize depends on the screen size, and it still keep ratio like an image.
Thank you
If your browser support allows you, you may use viewport units to convey aspect ratio for the div. The rest will be handled by the browser.
You may define class names for different sizes. The one that will work for 16:9 images is:
width: 100vw;
height: 77.78vw;
16 / 9 => 1.777777777777778;
In this case for 100% width of the viewport you need 77.78% height of the viewport applied to the element.
You can pre-define classes for different aspect ratios or use some simple JS to calculate this.
Codepen (same as below):
https://codepen.io/Mchaov/pen/vJrgYa
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
border: 1px solid red;
}
.autoScale-16-9 {
width: 100vw;
height: 77.78vw;
}
<div class="autoScale-16-9">auto scale div</div>
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.
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