Cut image pixels without distorting it

Question

Good morning!

I want to cut the sides of a photo without distorting it, it’s possible?

For example, I have this image here:

<img src="https://i.stack.imgur.com/4oeoT.jpg" name="Foto Teste" alt="Foto Teste"/>

She is 1200x1200

I wanted to take, let’s assume, 400px of the sides (200 of each side), ie I want her to stay 800 x 1200

But I don’t want to distort image or decrease, I want to keep the same thing only without 200px on each side. That’s possible?

Illustration:

.imagem
{
    width: 400px;
    height: 400px;
    background: red;
    border: 2px solid;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imagem-menor 
{
    background: #95d6e0;
    width: 300px;
    height: 400px; 
}

<div class="imagem">
    <div class="imagem-menor"></div>
</div>

In this case, the red part is the one I want to take out, the middle part leave, but without distorting anything.

Answer 1

Option 1

Yes it is possible you can use the image as a background of a div that has the size you want. With the style background-position vc sets the position of your background within the div in case it is centered horizontally and vertically to let the woman in the middle and cut the laterias as well

Look at the example. I did as you suggested, 800x1200

.imagem {
    background-image: url(https://i.stack.imgur.com/4oeoT.jpg);
    background-position: center;
    background-size: cover;
    width: 800px;
    height: 1200px;
}

<div class="imagem"></div>

---

Option 2

Another option would be to put the style object-fit: cover in the image, so it behaves as a background within the size you set in the tag img But that’s not quite crossbrowser see here for support https://caniuse.com/#feat=Object-fit (in IE does not work)

See the example to better understand.

.imagem {
    width: 800px;
    height: 1200px;
    object-fit: cover;
}

<img class="imagem" src="https://i.stack.imgur.com/4oeoT.jpg" alt="">

---

Option 3

You can put the image inside a div with overflow:hidden and use transform:translateX to adjust it within the container in the desired position.

See the example. Here I decrease the size proportionally for you see that it does not deform. I left some comments on the code read.

.imagem {
    width: 400px;
    height: 600px;
    overflow: hidden; /* esconde as laterais sobrando da imagem */
}
.imagem img {
    transform: translateX(-14%); /* ajusta a imagem na horizontal na posição que vc quiser*/
    height: 100%; /* deixa a imagem sempre com a altura correta */
}

<div class="imagem">
    <img src="https://i.stack.imgur.com/4oeoT.jpg" alt="">
</div>

TIP: Although you do not see what was "cut" those sides that are hidden are part of the image file, then the weight of the image remains the same, and at the time of the request the file size will remain the same. Consider treating these images before using them on the site...