Question

我的意思是有一个尺寸 W 的图像：200px， H ：300px。它位于内嵌块元素 div 中。 div的高度和宽度分别为200px，200px。因此，在垂直方向上有100px的额外部分图像流出div。我不想改变图像的尺寸。我只想垂直将该图像对齐div的中间，这意味着顶部和底部的图像的相等部分将不在div中。后来我想隐藏那些额外的部分。例如：

<div id="body">
 <div id="container">
  <img src=""/>
 </div>
</div>

任何解决方案？使用CSS？

Answer 1

使用transform: translateY();和overflow: hidden。

＆＃13;

.container {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 2px solid red;
  overflow: hidden;
}
.container img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

This <img src="http://lorempixel.com/200/300/animals/5"/> become this
<div class="container">
  <img src="http://lorempixel.com/200/300/animals/5"/>
</div>

＆＃13;

当您在div上使用固定的宽度/高度时，这里有一个很好的提示，使用background属性并仍然在标记中设置图像源，就像使用图像一样。

这样的解决方案将居中并裁剪任何大小的图像。

＆＃13;

.container {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 2px solid red;
  background: center center / cover;
}

＆＃13;

These becoms like this<br>
<div class="container" style="background-image: url(http://lorempixel.com/200/300/animals/5)">
</div>
<div class="container" style="background-image: url(http://lorempixel.com/400/200/animals/7)">
</div>
<div class="container" style="background-image: url(http://lorempixel.com/400/600/animals/3)">
</div>

<br>which originally looks like this<br>

<img src="http://lorempixel.com/200/300/animals/5">
<img src="http://lorempixel.com/400/200/animals/7">
<img src="http://lorempixel.com/400/600/animals/3">

＆＃13;

Answer 2

将overflow:hidden添加到包裹.container的{{1}}，并为<img> .container添加position:relative。然后为图片提供相对于position:absoulte的{{1}}。

此后，将图片 50px 移至顶部，相对于.container，将.container垂直居中。

这是一个有效的小提琴：https://jsfiddle.net/87gjtje6/3/

<img>

.container {
  width:200px;
  height:200px;
  border:solid 5px red;
  overflow:hidden;
  position:relative;
}

.container img {
    width:200px;
    height:300px;
    top:-50px;
    position:absolute;
}

Answer 3

这是一个不那么简单的解决方案，但它可以应用于任何元素以将其置于中心

img{
  position:absolute;
  width:200px;
  height:300px;
  top:50%;
  left:50%;
  margin-top:-100px;/*half of the height*/
  margin-left:-150px;/*half of the width*/
}

现在对于父div很容易，你可以给出溢出：隐藏＆＃39;属性。即

.container{
  position:relative;
  overflow:hidden;
}

Answer 4

最简单的解决方案是将图像设置为＆＃34;容器＆＃34;的背景。 div：

div#container{
    background: #ebebeb url("...image-url...") no-repeat center center;
    background-size: cover;
}

这将仅显示图像的一部分，即div内部，其余部分将被隐藏。在CSS-tricks上查找有关如何执行此操作的更多信息。

如果您只想隐藏图像的一部分，请使用

 #container{
    overflow: hidden;
    width: 200px;
    height: 200px;
}

如果你想将图像放在div的中心，还有另一种方法，但它有点复杂，你需要使用jQuery。它的工作方式是使用＆＃34;容器的overflow: hidden属性＆＃34;格。

var height = ... //div height
var width = ... //div width
var croppedimg = document.getElementsByClassName("cropped-image")[0];
var imgwidth = parseInt(croppedimg.offsetWidth);
var imgheight = parseInt(croppedimg.offsetHeight);
if (imgwidth > imgheight) {
    croppedimg.style.height = height;
    croppedimg.style.width = "auto";
    croppedimg.style.marginLeft = "-" + (($(croppedimg).width() - width) / 2) + "px";
 } else {
    croppedimg.style.width = height;
    croppedimg.style.height = "auto";
    croppedimg.style.marginTop = "-" + (($(croppedimg).height() - width) / 2) + "px";
 }

这种方式是这样的：我们将图像放在＆＃34;容器中＃34; div并给它className = "cropped-image"。然后我们使用一些javascript代码来调整div中的img。之后，我们使用margin-left和margin-top将图像放在div的中心。由于＆＃34;容器中的属性overflow: hidden＆＃34; div我们不会看到div之外的图像部分。

Answer 5

Flexbox将是最新的方法

＆＃13;

  <connectionStrings>
    <add connectionString="Data Source=.;Catalog=Homi;Integrated Security=True" providerName="System.Data.SqlClient" name="Context" />
 </connectionStrings>
</configuration>

＆＃13;

div {
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 1em auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

如何在容器内隐藏图像的额外顶部和底部？

5 个答案: