2

Central image in DIV and hide overflow

 2 years ago
source link: https://www.codesd.com/item/central-image-in-div-and-hide-overflow.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Central image in DIV and hide overflow

advertisements

This is kind of an unique case. I am trying to achieve the following:

  1. Square images should be 100% 100%. Basically fill out the entire DIV (which is squared)
  2. All images should fill out the entire height of the DIV.
  3. All images should be aligned center
  4. If they overflow the X-axis, they should overflow and hide

https://jsfiddle.net/cxnyLxfn/2/

.image-container {
    position: relative;
    width: 300px;
    height: 300px;
    display: inline-block;
    margin: 20px;
    border: 1px solid black;
    float: left;
    overflow: hidden;
}

.image-container img {
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

I almost achieved this, except for centering the images no matter what. The Google logo should be centered and the rest look fine as they are. How do I achieve my four requirements?

I usually use a flex approach to this:

.image-container {
  display: flex;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow: hidden;
  position: relative;
  align-items: center;
  justify-content: center;
}

img {
  display: block;
  height: 100%;
}

<div class="image-container">
  <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" />
</div>
<div class="image-container">
  <img src="https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" />
</div>
<div class="image-container">
  <img src="http://www.zevendesign.com/wp-content/uploads/2015/04/google-logo-progress-270x480.jpg" />
</div>
<div class="image-container">
  <img src="https://cdn.pixabay.com/photo/2015/10/31/12/56/google-1015752_960_720.png" />
</div>
Tags css

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK