Question

我正在尝试创建一个响应式网站。我正在尝试将图像添加到70％宽度的每个容器中。但我不知道如何设置图像以随着屏幕尺寸的变化进行调整。我的意思是我想让容器内的图像也具有响应性。

我不确定我是否清楚地描述了我的问题，如果您感到困惑或有任何问题，请告诉我。

Answer 1

确保父元素没有固定大小，然后将width: 70%添加到img。只要父页面与页面一起流动，相对70%宽度将与父级一起缩放。

＆＃13;

img {
  width: 70%;
}

＆＃13;

<div>
  <img src="https://i.stack.imgur.com/2C22p.jpg">
</div>

＆＃13;

Answer 2

@ troy-wu，您怎么看待这个？

尝试在此处调整视口宽度！ https://jsfiddle.net/rickydam/ob4umwp3/

.one {
  width: 70%;
  background-color: lightgray;
  display: inline-block;
}

.two {
  width: 30%;
  background-color: gray;
  display: inline-block;
  margin-left: -5px;
}

img {
  max-height: 20vw;
  display: inline-block;
}

<div class="one">
  <img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png">
</div>

<div class="two">
  <img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png">
</div>

如何自动调整图像大小以适合div容器

2 个答案: