Center the cropped image within a div container

Question

Center the cropped image within a div container

Is there a way to set a maximum height for a div containing an image and hide the parts of the image that exceed this height, while keeping it centered vertically inside the div? For example, if the browser width is 1200px and the image aspect ratio is 4:3, the image should display at (1200x900)px. However, if we want to crop the height to 300px and center it vertically, the image should be positioned at -300px inside the div.

This may require JavaScript, but I'm curious if there's a CSS solution as well. Thanks in advance!

css image html center crop

Answer 1

Answer №1

Here is my perspective on this: http://codepen.io/vsync/pen/DpmnK

HTML Code Snippet

<div class='box'>
  <img src="http://www.biztalk360.com/Events/BizTalk-Innovation-day-2014-Norway/images/banner.jpg">
</div>

SCSS Styling

.box{
  // defining the image container dimensions 
  width:100%;
  height:100px;

  // The magic happens here
  > img{
    position:absolute;
    z-index:-1;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%, -50%); 
    &.max{ width:auto; height:100%; }
  }
}

Javascript Function for Responsiveness

var photo     = document.images[0],
    container = document.querySelector('.box');

$(window).on('resize.coverPhoto', function(){
  requestAnimationFrame(checkRatio);
});

function checkRatio(){
  var state = photo.clientHeight <= container.clientHeight && 
              photo.clientWidth >= container.clientWidth;

  photo.classList[state ? 'add' : 'remove']('max');
}

Answer 2

Here is my perspective on this: http://codepen.io/vsync/pen/DpmnK

HTML Code Snippet

<div class='box'>
  <img src="http://www.biztalk360.com/Events/BizTalk-Innovation-day-2014-Norway/images/banner.jpg">
</div>

SCSS Styling

.box{
  // defining the image container dimensions 
  width:100%;
  height:100px;

  // The magic happens here
  > img{
    position:absolute;
    z-index:-1;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%, -50%); 
    &.max{ width:auto; height:100%; }
  }
}

Javascript Function for Responsiveness

var photo     = document.images[0],
    container = document.querySelector('.box');

$(window).on('resize.coverPhoto', function(){
  requestAnimationFrame(checkRatio);
});

function checkRatio(){
  var state = photo.clientHeight <= container.clientHeight && 
              photo.clientWidth >= container.clientWidth;

  photo.classList[state ? 'add' : 'remove']('max');
}

Answer 3

Answer №2

If you're interested, check out this question: Resizing an oversized image using overflow:hidden and maintaining the aspect ratio

http://codepen.io/gcyrillus/pen/Grbxg

.grid_3 { width:260px; margin:0 20px; float:left; text-align:center;
  overflow:hidden; background:rgba(255,255,255,0.02);}

.grid_3 a {
  display:block;  
  height:171px; border:solid 2px #FFFFFF;
  line-height:168px;
  overflow:hidden;
  margin-bottom:10px;
}
.max-img-border { width:100%; margin:-100% 0; vertical-align:middle;
}

Here's another example pen that explores vertical-align:middle with an image having virtually no height in the flow: http://codepen.io/gc-nomade/pen/DxCgv

Keep in mind that setting an image in the background center is simple if it doesn't need to convey any specific meaning in your content.

Answer 4

If you're interested, check out this question: Resizing an oversized image using overflow:hidden and maintaining the aspect ratio

http://codepen.io/gcyrillus/pen/Grbxg

.grid_3 { width:260px; margin:0 20px; float:left; text-align:center;
  overflow:hidden; background:rgba(255,255,255,0.02);}

.grid_3 a {
  display:block;  
  height:171px; border:solid 2px #FFFFFF;
  line-height:168px;
  overflow:hidden;
  margin-bottom:10px;
}
.max-img-border { width:100%; margin:-100% 0; vertical-align:middle;
}

Here's another example pen that explores vertical-align:middle with an image having virtually no height in the flow: http://codepen.io/gc-nomade/pen/DxCgv

Keep in mind that setting an image in the background center is simple if it doesn't need to convey any specific meaning in your content.

Answer 5

Answer №3

Are you looking to have the div act as a window for your image display? It reminds me of image sprites, which is when multiple icons are combined into one large picture and then displayed individually:

http://www.w3schools.com/css/css_image_sprites.asp

If you share a JSFiddle link with me, I can offer more specific help.

Answer 6

Are you looking to have the div act as a window for your image display? It reminds me of image sprites, which is when multiple icons are combined into one large picture and then displayed individually:

http://www.w3schools.com/css/css_image_sprites.asp

If you share a JSFiddle link with me, I can offer more specific help.

Center the cropped image within a div container

Answer №1

HTML Code Snippet

SCSS Styling

Javascript Function for Responsiveness

Answer №2

Answer №3

Similar questions

When a child element within a flex container has a relative position, the flex direction column will be overridden and

Bootstrap along with ROR 3.2.21 has a malfunctioning navbar

Aligning SVG shapes within each other

Placing an element in a fixed position behind a non-fixed element

Troubleshooting a mapping problem with CSS elements

Unable to locate a resolution for the error message "Warning: Task "uglify" not found"

Irregular word spacing observed in HTML code

Switch up the appearance of a document by manipulating the stylesheet using a select tag

Error with Bootstrap Layout caused by the StringBuilder

Menu/navigation bar designed with floating lines and an array of color options

Trouble displaying data in Jquery JSON

Troubleshooting regex validation issues in a JSFiddle form

Is there a way to conceal a div class on the Payment page in Shopify?

Conceal the HTML input element until the JavaScript has finished loading

The menu bar becomes distorted when the page is zoomed out

Using a pseudo-element after to center CSS content

Scrolling horizontally to display dynamic columns based on a search query in AngularJS

What could be preventing the background image from displaying properly?

I have tried using justify-content: center; and align-items: center; to center this div, but the container div is still not centered. How can I successfully center

Contrast between JQuery .display/.conceal and CSS view:invisible