Design Responsive with CSS images

One way to cut all rectangular images with a pure CSS in a square is the following:

img {
  object-fit: cover;
  width:17vw;
  height: 17vw;
  padding: 1vw;
}

<img src="https://cdn.civitatis.com/francia/paris/guia/campo-marte-m.jpg">
<img src="https://cdn.civitatis.com/francia/paris/guia/campo-marte-m.jpg">
<img src="https://cdn.civitatis.com/francia/paris/guia/campo-marte-m.jpg">
<img src="https://cdn.civitatis.com/francia/paris/guia/campo-marte-m.jpg">
<img src="https://cdn.civitatis.com/francia/paris/guia/campo-marte-m.jpg">

For this it is better that you do not use an image directly because, when you put a specific size, what the browser will do is distort the image to fit the specified size.

It would be better to put the image inside a container (a <div> would be worth) that has the size you want and that hides the parts that stick out ( overflow ). That way all the images will be the same size and will not be distorted (although a part will be lost in the vertical or horizontal ends depending on whether the image is in portrait or landscape mode).

Something like this:

div.contenedor-imagen {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 120px;
  overflow: hidden;
}

div.contenedor-imagen img {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="contenedor-imagen">
  <img src="https://www.tuexperto.com/wp-content/uploads/2018/03/paisajes.jpg">
</div>
<div class="contenedor-imagen">
  <img src="https://placehold.it/200x400">
</div>
<div class="contenedor-imagen">
  <img src="https://placehold.it/300x200">
</div>
<div class="contenedor-imagen">
  <img src="https://placehold.it/300x300">
</div>

Another option would be to use background images ( background-image ) instead of putting the images as a label within div .

That way you could specify a background-size: cover to tell the browser that the background image should be expanded / reduced to fit the size of the container in the most appropriate way.

This alternative would look like this:

div {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 120px;
  background-size: cover;
  background-position: center center;
}

<div style="background-image: url(https://www.tuexperto.com/wp-content/uploads/2018/03/paisajes.jpg)"></div>
<div style="background-image: url(https://placehold.it/200x400)"></div>
<div style="background-image: url(https://placehold.it/300x200)"></div>
<div style="background-image: url(https://placehold.it/300x300)"></div>

This solution could also be improved in other ways: avoiding online styles or using data-attributes and the pseudo-elements ::before or ::after .

For that you need a responsive square . You do not need any other unit of measure than per cent. For that you must make a container of positioned elements and then using padding specify the height of your container. This is possible because when it is specified in percent it is calculated like this:

  

With respect to the width ("width") of the block that contains it.

So if you specify the width in percent you can also specify the height in percent. If you use the same number for both, it will be a square in any resolution .

This technique is the most compatible with all browsers and is also better integrated with the other framework systems of CSS frameworks such as bootstrap that are based on percents .

Using vm is a bad idea because this unit refers to percent of the viewport , not percent of the container element as it should be. Imagine that you put a sidebar and already your code does not work because the sidebar is occupying part of that percentage.

First create your square container

.responsive-container {
    position: relative; // Para contener los hijos absolutos
    width: 50%; // La dimensión que quieras
    height: 0; // Eliminas el alto para especificarlo con padding
    padding: 50% 0 0; // top igual que el width y los demás en 0
}

Then you make a container or a class for the image that is absoluto and that covers all its parent element.

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

The responsive-container does not have high but the padding creates a space that is completely occupied by image container . Here you have several options to show the images how to use background-image or that your image container is the image as such. Here I leave some variants that occur to me.

.responsive-container {
  float: left;
  position: relative;
  width: 50%;
  height: 0;
  padding: 50% 0 0;
}

.image-bg1,
.image-bg2 {
  background-image: url(https://picsum.photos/400/300);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.image-bg2 {
  background-image: url(https://picsum.photos/600/300);
}

<div class="responsive-container">
  <div class="image-bg1"></div>
</div>
<div class="responsive-container">
  <div class="image-bg2"></div>
</div>

You can also use img

.responsive-container {
  float: left;
  position: relative;
  width: 50%;
  height: 0;
  padding: 50% 0 0;
}

.image-bg {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="responsive-container">
  <img class="image-bg" src="https://picsum.photos/400/300">
</div>
<div class="responsive-container">
  <img class="image-bg" src="https://picsum.photos/600/300">
</div>

It's only for you to see that you have many possibilities as long as you use padding to generate your layout.

In this last example I'm using half of the screen and it still works

.screen-half {
  width: 50%;
  margin: 0 auto;
}

.responsive-container {
  float: left;
  position: relative;
  width: 50%;
  height: 0;
  padding: 50% 0 0;
}

.image-bg1,
.image-bg2 {
  background-image: url(https://picsum.photos/400/300);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.image-bg2 {
  background-image: url(https://picsum.photos/600/300);
}

<div class="screen-half">
  <div class="responsive-container">
    <div class="image-bg1"></div>
  </div>
  <div class="responsive-container">
    <div class="image-bg2"></div>
  </div>
</div>