Streaming live at 10am (PST)

Image stretching when on mobile viewport PLEASE HELP

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

auto

width: auto; => set the height to 275 ==> The auto width is 507.

100%

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;

“Crop effect”

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:

https://www.w3schools.com/css/css3_object-fit.asp

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