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;
}
Related
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;
}
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 have a few images to display. The images have to be displayed on a larger viewport. But the resolutions of the image are affecting the display. The images with more width are getting displayed very nicely but the images with more height are getting stretched.
<div class="col-md-8" style="text-align: center;">
<img src="img/produce_img/8-turmeric-868187035471289-1544677646857_micro_4.jpg" alt="user" style="width:100%;height:auto">
</div>
All the images are having inline CSS of width 100% and height auto
Resolution 1:-
Width : 858px
Height: 217px
The image display is large and very clear.
Resolution 2:-
Width : 256px
Height: 611px
The image display is large, but the screen size is increased a lot vertically.
Resolution 3:-
Width : 72px
Height: 178px
The image display is large, but the image quality is stretched out.
Any idea how to display the images largely irrespective of any resolution without affecting the quality?
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 the following HTML to display an image:
<img src="img_locations/location1.jpg" height="200px" width="300px">
The aspect ratio I've set above is 3:2. The image itself has an aspect ratio of 4:3. The above stretches the image and displays the correct pixels in Chrome / Firefox. In IE10 / IE9, the browser takes into account the height(200px), but decreases the width so that the original 4:3 aspect ratio is preserved.
How do I overwrite this rendering in Internet Explorer and display the image in a 3:2 aspect ratio?
You use CSS. Nowadays specifying width and height as HTML attributes is very bad practice. You should do something like this:
img {
width: 300px;
height: 200px;
}