html – div中的中心图像,隐藏溢出

发布时间：2020-12-14 21:25:05 所属栏目：资源来源：网络整理

导读：我有一个400px的图像和一个较小的div(宽度并不总是300px，如我的例子)。我想将图像居中在div中，如果有溢出，则隐藏它。注意：我必须保持这个位置：绝对在行李上。我正在使用css-transitions，如果我使用position：relative，我的图像会抖动一下(http://bit

我有一个400px的图像和一个较小的div(宽度并不总是300px，如我的例子)。我想将图像居中在div中，如果有溢出，则隐藏它。

注意：我必须保持这个位置：绝对在行李上。我正在使用css-transitions，如果我使用position：relative，我的图像会抖动一下(http://bit.ly/MaYbMB)。

的jsfiddle
http://jsfiddle.net/wjw83/1/

解决方法

你应该让容器相对并给它一个高度，你就完成了。

http://jsfiddle.net/jaap/wjw83/4/

.main {
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  height: 200px;
}

img.absolute {
  left: 50%;
  margin-left: -200px;
  position: absolute;
}

<div class="main">
  <img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />

如果您愿意，还可以通过添加负边距和顶部位置来垂直居中图像：http://jsfiddle.net/jaap/wjw83/5/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!