My images stretch when I change viewport (mobile). I want a fixed height (~300px) however when i change viewports the image stretches to accomodate, why doesnt the image just cover the space instead. When i set the height to 100% or auto the image is very small and this isnt what i want.
Please see the below!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Example: Image size - 1000_w-x-542_h
width: auto; => set the height to 275 ==> The auto width is 507.
width: 100% => set the height to 275 ==> The image fill-up the avaiable space no-matter what (= Strech/destroy-aspect ratio).
In general, for responsive images you should use:
width: 100%;
height: auto;
If you want height of 275px no matter what without destroy the aspect-ratio you should use object-fit: cover. Her example for 16:9 aspect ratio:
Hello! - regarding the empty div approach, can this still be linked to a CMS database in the same way in which an image can?
Yes as bg image. (Or use regular img).
Try first, if you won’t succeed i add short example
Hi, I attempted this approach but couldnt get this feature to work. I’d appreciate an example on how to achieve this