[英]Legit way to center overflowing image in container? (HTML/CSS)
我确实一直在寻找这个答案,但没有成功。 我找到了一些可以执行此操作的方法,但这些方法看起来很奇怪。 (像边距:-9999px;)所以我想做的就是将此图像居中放置在容器中。 溢出和宽度/高度属性应按其应有的方式工作,但您应该看到图像的中心。
提前致谢!
HTML:
<section class="photo-grid-static">
<div class="photo-grid-container"><img src="Images and videos/odesza1.jpg"/></div>
<div class="photo-grid-container"></div>
<div class="photo-grid-container"></div>
</section>
CSS:
.photo-grid-static {
height: 300px;
width: 100%;
display: block;
position: relative;
background: black;
padding: none;
}
.photo-grid-container {
float: left;
width: calc(100% / 3);
height: 100%;
line-height: 100%;
margin: 0;
margin-right: 0;
padding: 0;
display: inline-block;
position: relative;
left: 0;
right: 0;
background: red;
}
.photo-grid-container img {
height: 100%;
overflow: hidden;
position: relative;
}
<section class="photo-grid-static">
<div class="photo-grid-container" style="background-image: url('videos/odesza1.jpg')"></div>
<div class="photo-grid-container"></div>
<div class="photo-grid-container"></div>
</section>
.photo-grid-container {
/* other styles */
background-position: center center;
background-size: cover;
}
如果那是什么意思?
一秒钟之后,我会做一个模拟。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.