css Div中的图像不会填充整个div

new9mtju 于 2023-08-09 发布在其他

关注(0)|答案(2)|浏览(173)

我似乎不能得到的人在网站的右边，以填补剩余的空间的形象，这是一个css的问题，但不能解决它。
很明显，我需要整个东西能够响应，这是，但这个图像也，因为它填补了它的空间。

<div class="wp-block-column is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" src="https://www.accend4web.co.uk/morgiou/wp-content/uploads/2023/07/home-person-test-1.jpg" alt="" class="wp-image-69" srcset="https://www.accend4web.co.uk/morgiou/wp-content/uploads/2023/07/home-person-test-1.jpg 1000w, https://www.accend4web.co.uk/morgiou/wp-content/uploads/2023/07/home-person-test-1-300x150.jpg 300w, https://www.accend4web.co.uk/morgiou/wp-content/uploads/2023/07/home-person-test-1-768x384.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" width="1000" height="500"></figure>
</div>

@media (min-width: 782px)
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
flex-basis: 0;
flex-grow: 1;
}

.entry-content .wp-block-image img {
max-width: 100%;
height: auto;
width: 100%;
object-fit: cover;
}

字符串
Home Page

css

来源：https://stackoverflow.com/questions/76813782/image-in-div-will-not-fill-the-whole-div

2条答案

按热度按时间

6rqinv9w1#

将图像及其容器的高度更改为100%。对象拟合则正确地填充空间。
目前您的<figure>没有高度，而img的高度为auto。object-fit: cover;在这里做它的工作，但由于图像高度是auto，图像的高度（和填充的空间）与图像宽度成正比。通过使图像和它的容器的高度为100%，您告诉图像占用整个空间，然后它运行object-fit: cover;来填充整个空间。

.wp-block-image {
  margin: 0 0 1em;
  height: 100%;
}
.entry-content .wp-block-image img {
  max-width: 100%;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

字符串

赞(0）回复(0）举报 2023-08-09

yi0zb3m42#

我访问了网站并尝试了一些解决方案。问题是你的div的分辨率是632x996，而你的图像的分辨率是632x316。
因为你的div的高度比你的图片的高度大，所以不可能完全保留图片。您可以尝试以下操作：

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

.image-container img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 100%;
    z-index: 1;
}

字符串
这将削减图像一点，但我认为你可以调整您的图像的分辨率相应。

赞(0）回复(0）举报 2023-08-09

我来回答

css Div中的图像不会填充整个div

2条答案

相关问题

热门标签

最新问答