Question

我有一个<div>容器占据屏幕的80％（响应页面）。在<div>内，我想显示一个400 x 400（像素）的图像。

我的目标：

屏幕宽度增加：<div>的宽度会增加。图像的宽度最大会增加到400px。
屏幕宽度减小：<div>的宽度将减小。当屏幕宽度小于400px时，图像的宽度将开始减小。

这是我的JS Bin。

有什么想法吗？

Answer 1

您需要告诉img使用width: 100%占用其父级宽度的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>

Answer 2

试试这个（IE6支持）：

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

.wrapper img {
    width: 100%;
    max-width: 400px;
    width: expression(this.offsetWidth > 400 ? "400px" : "auto");
}

Answer 3

您可以在img：

上将heigth和width设置为100％

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <img src= "https://s14.postimg.org/4nu4hmvyp/8222.jpg" style="width: 100%; height: 100%; max-width: 400px;">
  </div>
</body>
</html>

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

3 个答案: