Question

我的网站上有一张图片（左侧），当您调整浏览器窗口大小时，它没有响应。但是，一旦刷新图像，就会填满整个空间。有任何想法让它正确回应？

网站：splitblog.squarespace.com

HTML

<figure class="content-fill main-image"><img {@|image-meta}></figure>

CSS

.main-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:-1000;
}

Answer 1

我看到图像宽度是在图像元素上设置的，并通过js动态设置。

你必须对图像施加100％的宽度。

.main-image img{
  width: 100%!important;
}

Answer 2

.main-image img {
width: 953px !important;
height: 1430px !important;
}

你搞乱了滚动条，更改了溢出

.side-right {
overflow-y: scroll;
}

body {
overflow: hidden;
}

@media screen and (max-width: 1000px) {
    body {
        overflow-y: scroll;
    }
    .side-right {
        overflow: hidden;
    }
}

主图像没有正确调整大小

2 个答案: