将图像居中 div 而不裁剪图像和隐藏溢出

Question

我必须将每个图像都设置在每个 div 的中心，并隐藏溢出，而不裁剪图像。我试过

margin: auto 0;
background-position: center;

但没有任何效果。

.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.column {
  width: 16.7% !important;
  max-width: 16.4% !important;
  height: 100%;
  display: inline-block;
  margin-right: -1px;
  overflow: hidden;
  position: relative;
}

.column .picture:before {
  height: 100%;
  transition: all .7s;
  display: none;
}

.picture {
 background-position: center;
  height: 90%;
  overflow: hidden;
  transition: all .5s;
}

.column:hover .picture {
  filter: blur(1.2px);
  overflow: hidden;
 height: 100%;
  transition: all .5s;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(1px) scale(1.1, 1.1);
}

.column:hover .picture:before {
  display: block;
  transition: all .7s;
}

.label{
  color: #E7E7E7;
  font-size: 2em !important;
  font-weight: 900;
  line-height: 60px;
  text-shadow: 3px 3px #953163;
  text-align: center;
  text-decoration: none;
}

<div class="main">
   <div class="column">
    <a href="http://link1.com/">
     <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt="">
     <div class="label"> Link 1</div>
    </a>
   </div>
   <div class="column">
    <a href="http://link2.com/">
     <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt="">
     <div class="label"> Link 2</div>
    </a>
   </div>
   <div class="column">
    <a href="http://link3.com/">
     <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt="">
     <div class="label"> Link 3</div>
    </a>
   </div>
</div>

enter code here

Answer 1

将图片 -50% 向左平移，并将左边距设置为 50%。

为防止悬停变换移除 translateX，将其更新为：

transform: translateX(-50%) translateZ(1px) scale(1.1, 1.1);

.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.column {
  width: 16.7% !important;
  max-width: 16.4% !important;
  height: 100%;
  display: inline-block;
  margin-right: -1px;
  overflow: hidden;
  position: relative;
}

.column .picture:before {
  height: 100%;
  transition: all .7s;
  display: none;
}

.picture {
  display: inline-block;
  height: 90%;
  transition: all .5s;
  transform: translateX(-50%);
  margin-left: 50%;
}

.column:hover .picture {
  filter: blur(1.2px);
  overflow: hidden;
  height: 100%;
  transition: all .5s;
  -webkit-backface-visibility: hidden;
  transform: translateX(-50%) translateZ(1px) scale(1.1, 1.1);
}

.column:hover .picture:before {
  display: block;
  transition: all .7s;
}

.label {
  color: #E7E7E7;
  font-size: 2em !important;
  font-weight: 900;
  line-height: 60px;
  text-shadow: 3px 3px #953163;
  text-align: center;
  text-decoration: none;
}

<div class="main">
  <div class="column">
    <a href="http://link1.com/">
      <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt="">
      <div class="label"> Link 1</div>
    </a>
  </div>
  <div class="column">
    <a href="http://link2.com/">
      <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt="">
      <div class="label"> Link 2</div>
    </a>
  </div>
  <div class="column">
    <a href="http://link3.com/">
      <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt="">
      <div class="label"> Link 3</div>
    </a>
  </div>
</div>

Answer 2

我将 max-width 设置为 100%，将 height 设置为 auto。希望这就是您所追求的。

.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.column {
  width: 16.7% !important;
  max-width: 16.4% !important;
  height: 100%;
  display: inline-block;
  margin-right: -1px;
  overflow: hidden;
  position: relative;
}

.column .picture:before {
  height: 100%;
  transition: all .7s;
  display: none;
}

.picture {
 background-position: center;
  height: auto;
  overflow: hidden;
  transition: all .5s;
  max-width: 100%;
}

.column:hover .picture {
  filter: blur(1.2px);
  overflow: hidden;
 height: auto;
  transition: all .5s;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(1px) scale(1.1, 1.1);
}

.column:hover .picture:before {
  display: block;
  transition: all .7s;
}

.label{
  color: #E7E7E7;
  font-size: 2em !important;
  font-weight: 900;
  line-height: 60px;
  text-shadow: 3px 3px #953163;
  text-align: center;
  text-decoration: none;
}

<div class="main">
   <div class="column">
    <a href="http://link1.com/">
     <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt="">
     <div class="label"> Link 1</div>
    </a>
   </div>
   <div class="column">
    <a href="http://link2.com/">
     <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt="">
     <div class="label"> Link 2</div>
    </a>
   </div>
   <div class="column">
    <a href="http://link3.com/">
     <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt="">
     <div class="label"> Link 3</div>
    </a>
   </div>
</div>

将图像居中 div 而不裁剪图像和隐藏溢出

Centering images in a div without cropping the images and hiding the overflow

html

css

center

overflow