How to crop an image - HTML

Navigation
6

I need to make an image within a div to have a width of 600px and a height of 300px without distorting the image.

I have a notion about css3 and html5 and I'm working on the layout of a blog on the Blogger platform. I've changed a lot in the source code of the initial layout. And now I want to do is this:

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

It can be cut, but not distorted, could anyone help me do that?

Link to the blog: link
Example of how I want the image to be: link

    
asked by anonymous 27.06.2015 / 20:56

2 answers

6
Crop image using object-fit

You can crop an image with the img tag using 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><divclass="imagem">
    <span>imagem não recortada (altura da imagem encolhe) </span>
    <img class="imagemNormal" src="http://i.stack.imgur.com/gL1sB.jpg"></div>
  

Nowadaysallbrowserssupportobject-fitexceptInternetExplorer.  MoreinformationabouttheObject-fitpropertyinthefollowinglinks:

    

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>
Cropimageusingtheimageasbackground

Ifyouareusingtheimageasbackground-image,youcandosousingthebackground-size:cover;property.

.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're looking to crop an image with several prepared measures, you can always use plugins, such as jQuery you have the resizeAndCrop .

There are also other PHP plugins like Timthumb, but this is no longer advisable due to security issues. But you can always search on Google for plugins to your language preference, PHP / JavaScript etc to find what is best and suits your needs.

    
27.06.2015 / 21:16
0

Would that be it? 

.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 within background-image , use background-position , example: 

background-position: 50px; /* desce 50px */
    
27.06.2015 / 21:05
How to Run JavaScript on the Java 8 Nashorn Engine Programmatically How to run PHP in interactive mode?