javascript - 在响应式 DIV 容器内增加图像的宽度直到其原始宽度

Question

我有一个 <div>占据屏幕 80% 的容器(响应页面)。这里面<div>我想显示一张 400 x 400(像素)的图像。

我的目标:

1. 屏幕宽度增加:<div>的宽度会增加。图片的宽度最大会增加到 400 像素。

2. 屏幕宽度减小:<div>的宽度会减小。当屏幕宽度小于 400px 时，图像的宽度将开始减小。

这是我的 JS Bin .

有什么想法吗？

Answer 1

您需要使用 width: 100% 告诉 img 占用其父级宽度的 100%。 max-width 将阻止它扩展超过 400px:

.wrapper {
  width: 90%;
  height: 400px;
  border: 1px solid blue;
}

.wrapper img {
  width: 100%;
  max-width: 400px;

<div class="wrapper">
  <img src= "https://s14.postimg.org/4nu4hmvyp/8222.jpg">
  </div>