How to crop an image - HTML

Question

I need to make an image inside a div be with a width of 600px and a time of 300px without distorting the image.

I have a notion about css3 and Html5 and am working on the layout of a blog on the Blogger platform. I’ve already changed a lot of the source code of the initial layout. And now I want to do this:

I want the post to show a preview image that is automatically generated from the first image of the post, in which case I have already programmed to happen this, but I need the preview to have width:600px and height:300px without distorting the image that will serve as a preview on the home page.

It can be cut, but not distorted, someone could help me do it?

Blog link: https://www.futebolcomblush.com.br
Example of how I want the image to look: http://blogdopizzato.com.br/

Answer 1

Crop image using object-fit

You can crop an image with the tag img using the object-fit as follows:

.objectImage {
    width: 600px;
    height: 120px;
    object-fit: cover;
    object-position: center;
}
.imagemNormal {
    width: 600px;
    height: 120px;
}

<div class="imagem">
    <span>object-fit: cover; (imagem recortada)</span>
    <img class="objectImage" src="http://i.stack.imgur.com/gL1sB.jpg">
</div>

<div class="imagem">
    <span>imagem não recortada (altura da imagem encolhe) </span>
    <img class="imagemNormal" src="http://i.stack.imgur.com/gL1sB.jpg">
</div>

Nowadays all browsers support the object-fit except for Internet Explorer.
More information about the Object-fit property at the following links:

• Css-Tricks Object-fit
• Mozilla Object-fit

---

Crop image using a container with the properties Overflow and Position

.imagem-wrapper {
    width: 600px;
    height: 120px;
    overflow: hidden;
    position: relative; /* Para fazer que a imagem com position-absolute respeite a sua posição consoante este selector, ou evitar que saia do mesmo */
}
.imagem {
    width: 600px;
    /* código abaixo centra a imagem ao centro */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

<div class="imagem-wrapper">
    <img class="imagem" src="http://i.stack.imgur.com/gL1sB.jpg">
</div>

---

Crop image using image as background

If you are using the image as background-image, you can also do it using the property background-size: cover;.

.imagemBg {
    width: 600px;
    height: 120px;
    background: url(http://i.stack.imgur.com/gL1sB.jpg) center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

<div class="imagemBg"></div>

---

Alternative

Alternatively, if you are looking to crop an image with several measures prepared, you can always use plugins, such as jQuery you have the resizeAndCrop.

There are also other plugins in PHP like Timthumb, but this is no longer advisable due to security issues. But you can always Google plugins to your language preference, PHP/Javascript etc to find what’s best and fit your needs.

Answer 2

Would that be?

.preview {
  width: 600px;
  height: 300px;
  background-image: url('http://blogdopizzato.com.br/wp-content/uploads/2015/06/201501072015-Maranhao.jpg');
  border: 1px solid;
}

<div class="preview"/>

If you want to move the image from inside the background-image, use the background-position, example:

background-position: 50px; /* desce 50px */