Kevin Powell - Community•2y ago

Controling responsive images.

Hello everyone, how do I make my images look like in the design (design is in the left) preferably without using a div, I

8 Replies

Jochem•2y ago

you mean cropped at the top and bottom?

<img src="https://picsum.photos/800/800" alt="">

<img src="https://picsum.photos/800/800" alt="">

img {
  height: 600px;
  width: 800px;
  object-fit: cover;
}

img {
  height: 600px;
  width: 800px;
  object-fit: cover;
}

That will show an 800x800 image, and restrict it to 600px high, maintaining aspect ratio the height and width are just there for demonstration, you can set that however you want in yours. Because you didn't share any code, I just made a minimal example. The thing that's causing the image to not just distort is object-fit: cover; https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Adhurim GashiOP•2y ago

These images are meant to be responsive which means fixed heights and widths should be avoided. I will happily share my code with you so you can provide me with the answer I am looking for, thank you!

Adhurim GashiOP•2y ago

https://jsfiddle.net/speedy2k/xwL4uzvc/6/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Jochem•2y ago

set a max-height on there and add object-fit: cover; It'll shrink if needed, but won't get bigger than max-height

Wolle•2y ago

Maybe aspect-ratio is an option for you.

Jochem•2y ago

that is, assuming you mean the cropped top and bottom, you never clarified (also, if you share the code right from the start, it's easier for people to help you, and you'll get much better responses)

Wolle•2y ago

In your jsfiddle your html is invalid, you close your <li>s first, then your <a>s. (That may lead to unexpected behaviour.)

Adhurim GashiOP•2y ago

thank you !

Gaming

Programming

Controling responsive images.