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

Question

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

我不确定我是否把我的问题描述得足够清楚，如果您有任何困惑或有任何疑问，请告诉我。

Answer 1

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

img {
  width: 70%;
}

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

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 容器

How do I auto-resize an image to fit a div container

html

css

image

responsive