3

I would like my images to look good on any device. On my homepage I'm using ContentViews plugin to list the latest articles posted. In the settings of the plugin I can set the thumbnail to be different sizes.

Currently I set it to medium (300x300), but when I looked at the site, the thumbnails were in different shapes. So I set a custom css:

width: 300px; height: 270px;

Now the images have the same size, but some of them look bad. Is there a css code to somehow scale the images of any sizes, so they don't look stretched? So I don't have to manually edit them in PS, for example?

My site: http://slovosalanov.sk/test/

David Barczi
  • 33
  • 1
  • 3
  • Possible duplicate of [Responsive Images with CSS](https://stackoverflow.com/questions/11736363/responsive-images-with-css) – Mehran Prs Apr 15 '18 at 08:05
  • If you only give `width` or `height`, the other value is calculated in scale. – deEr. Apr 15 '18 at 08:05

1 Answers1

6

You can use the object-fit property to display the image correctly regardless of the aspect ratio of the containing box or image. This way you can have uniform sized boxes with any image inside.

.pt-cv-wrapper img {
    object-fit: cover;
}

Here is a polyfill for IE and Edge.

Coffee bean
  • 1,474
  • 15
  • 27