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

Question

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

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

Answer 1

@troy-wu，你怎么看这个？

尝试在此处调整视口(viewport)宽度! 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>