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;
}
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'm having an issue using object-fit: cover and srcset together. I have the image set to:
.banner-fit {
object-fit: cover;
height: 50vh;
width: 100vw;
max-width: 1300px;
}
and the image is using srcset like so
<img srcset="
./assets/images/media/media-4x.jpg 3200w,
./assets/images/media/media-3x.jpg 2400w,
./assets/images/media/media-2x.jpg 1600w,
./assets/images/media/media-1x.jpg 800w,
" src="./assets/images/media/media-2x.jpg" alt="Newspapers" class='banner-fit'>
The issue is that mobile devices are choosing the image based on the width. For instance a device with a 320 CSS px screen with a density of 2x is choosing the 800px x 344px image. But because of the object-fit:cover the device actually needs a size bigger to display properly (not be blurry). For instance the image on that same device will be 284 CSS px tall, so 568 actually pixels, which means that it needs the 1600px x 688px image.
Any suggestions on how to handle this?
I think using the attribute sizes we can specify which image to load when the viewport has certain width. sizes defines the media condition based on which the image from srcset is used. link
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'm working on a site which has a series of 'hero' panels running down the home page which have text overlaid on large background images.
Ideally I'd like to use inline images with srcset and sizes so the browser can choose the most appropriate image based on the screen size, rather than just whacking in the largest possible image as a background-image and then scaling it down for smaller screens.
So far my markup looks like:
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
srcset="/img/trekking_320.jpg 320w,
/img/trekking_480.jpg 480w,
/img/trekking_600.jpg 600w,
/img/trekking_768.jpg 768w,
/img/trekking_960.jpg 960w"
data-sizes="100vw"
class="lazyload"
>
and CSS:
img {
position: absolute;
height: 100%; width: auto;
}
and overflow:hidden on the container.
The height of the images is 320px up to 768px, then 480px up to 960px and then a max-height of 600px after that.
I've made a Codepen to illustrate the problem. Everything works fine on retina screens at all different screen sizes (mobile, tablet, laptop) and on a normal dpi screen it's fine too up to 768px wide, but after that the images don't fill the screen.
So is it possible to do all the things I've asked in the title? Am I on the right track or do I need to take a completely different approach?
Don't abuse <img /> for background images - use CSS background-image (with background-size: cover or fill for a 'responsive' look) but use the image-set function to specify different images for different device display resolutions:
Is there a srcset equivalent for css background image
https://drafts.csswg.org/css-images-3/#image-set-notation
Though as of June 2017, image-set is not supported by Firefox/Gecko, Internet Explorer or Edge - only WebKit-based browsers (Chrome, Safari, Opera): http://caniuse.com/css-image-set/embed
body {
background-image: -webkit-image-set(
url('path/to/image') 1x,
url('path/to/high-res-image') 2x,
etc...
);
background-size: cover;
}