How to resize an image cropping it equally on each side with CSS


Tags: html,css,image,css3

Problem :

I have an img banner that is automatically created by the framework I'm using.

The code generated is this:

<div class="owl-item" style="width: 1282px;">
    <img id="5" runat="server" alt="" src="http://preciosa.myciashop.com.br/Assets/Banner/3/banner1.jpg " style="border:0;" width="1680px" height="434px">
</div>

What I want is: When the browser width is smaller than 1680px the image starts to be cropped equally on each side, so that after some resizing only the girls face is visible (the center of the image).

The image: http://preciosa.myciashop.com.br/Assets/Banner/3/banner1.jpg

I know it's easy to do if I set the image as div's background image, but I can't. I have to do that only using CSS and the HTML structure I've described.

Is that possible? Thanks!



Solution :

You could use position:absolute for the image inside a container with position: relative when the viewport is 1679px wide or less (note: this approach requires to know in advance the height of the parent element, as in your example)

Codepen demo (position: absolute)

Markup

<div style="width: ...px;">
    <img src="http://.../banner1.jpg" width="1680px" height="434px" />
</div>

CSS

@media all and (max-width: 1679px) {
    div { position: relative; 
          height: 434px;
          width: 100% !important; /* to override any inline style */
          overflow: hidden; }

    img { position: absolute; 
          top: 0; left: 50%;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }
}

A modern and elegant approach might use instead the Flexbox module, so the height of the element is not even necessary on the CSS (and this is better for code reusability)

Codepen Demo (display: flex)

@media all and (max-width: 1679px) {
    div { 
        display: flex;
        justify-content: center;
        width: 100% !important; /* to override any inline style */
    }
}

    CSS Howto..

    How to put a inside a

    without transpassing border height? [closed]

    How to align images to the bottom with css?

    Meeting Calendar | How to take care of the overlapping meetings to show in the calendar?

    How can I keep my CSS transform (rotate & skew origin) from moving a few pixels to the right?

    How to dynamically set and modify CSS in JavaScript?

    How to understand this CSS inheritance (or override, selection)

    How to write CSS correctly when there are the same properties but with different prefixes for the various browser support?

    How can I make my webpage background cover fixed for the full size page in css?

    How to make 3-corner-rounded triangle in CSS

    How to make whole table cell clickable but vertical align text inside it - CSS

    How add “cover”/“shadow” on div?

    How to change CSS style of div after onclick method

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    gwt - How to CSS reset a GWT app?

    CSS how to change page content depending on page size (zoom) in responsive design

    How to do mobile devices-friendly CSS for both desktop and mobile devices

    How to make child divs visible in tympanus.net's CSS Radio Checked Tab Method

    Css flex-box - How to align a single item to the bottom while keeping the other items to the top

    how would I use Javascript, html and css to produce the running tiger effect seen in run4tigers website? [closed]

    How to align image and download button in css?

    CSS - How to centre a link button

    How to make a horizontal div scroll bar float like a fixed CSS div

    How to make images go inline vs break to a new line?

    How do I remove the padding between the content of the cell and the cell borders in a table? [duplicate]

    How can I change the ckeditor iframe CSS styling

    How to disable a css rule for a wordpress plugin

    how to remove small space that only appear in iphone browser

    Text is too close to scroller. How to create a little bit space between scroller and text?

    How to remove CSS underline?

    CSS: How to move text link to the right inside li