Question

我对HTML＆amp; CSS并试图学习它，因此这个问题。我的目标是创建一个不超过图像原始大小的响应式图像。在this question上找到了一些信息，我可以通过将图像放在div中的内联块中来实现（参见代码片段），但它没有回答一个基本问题。响应能力如何发挥作用。

对于视口大于图像的情况，我的HTML代码有意义，即图像的宽度为100％，这意味着获取父容器的大小。在这种情况下，父容器是内联块，其大小实际上是它所包含的内容的大小，因此100％表示图像将以原始大小显示。

但是当我将浏览器窗口调整为较小的尺寸时，图像会随之调整大小。在这里，我无法理解行动的机制。根据我的信息（截至目前为止），内联块总是占用它所包含的内容的大小，然后当外部容器改变它的大小时，它是如何调整大小的。

如果父容器不足以填充内联元素，那么内联块是否会占用其在父容器中适合的内容大小TILL的内容，内联元素将调整大小到父容器而不是它本身的内容？

P.S。 - 关于Stack Overflow的第一个问题。

.container {
  border: 2px solid black;
  padding: 5px;
  text-align: center;
}

.responsive-image {
  width: 100%;
  max-width: 1920px;
}

.inline-block {
  display: inline-block;
  border: 2px solid purple;
  padding: 3px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="inline-block">
      <img class="responsive-image" src="https://drive.google.com/uc?authuser=0&id=0B3Fs1er7k9QAQUU1bzhqYWMxeUU">
    </div>
  </div>
</body>

</html>

Answer 1

width: 100%表示其宽度取决于其父级。

Answer 2

.inline-block {
 display: inline-block;
 border: 2px solid purple;
 padding: 3px;
 }

如果它将应用于ny div，则这是一个类，然后具有此类的所有元素将与第一个一起显示为内联。

width:100%;

与总宽度有关的东西，这里的总宽度意味着与其父div的大小相同。如果将大小更改为700px，则需要700px，因为代码指的是无论父div有什么，请接受。

Answer 3

首先是一些基础知识：

首先，你需要了解什么是inline（参考：Inline element），什么是block（参考：Block element）

块元素：块级元素始终在新行上开始并占用可用的全宽，即 100％宽度（向左和向右延伸）尽可能）。块级元素的示例：

<div>
<h1> - <h6>
<p>
<form>

内联元素：内联元素不会在新行上启动，只会占用所需的宽度。内联元素的示例：

<span>
<a>
<img>

我认为，现在你可以了解inline-block的意思是什么？

inline-block：inline-block的任何元素都会显示inline，并且可以使用 100％的宽度，就像block元素一样需要。因此，如果有任何宽度为inline的{{1}}元素已经可用，现在您应用属性：显示为30%，那么将占用整个剩余的inline-block宽度。在这里，剩余的70％实际上是70%

的宽度100％

这是reference。我希望它有所帮助。

Answer 4

在width: 100%中设置图像时，它将填充图像所属容器的宽度。即使容器有多宽的宽度。

如果指定width:100%，则元素的总宽度将为其包含块加上的100％任何水平边距，填充和边框（如果指定了box-sizing:border-box），在哪种情况下只有边距被添加到100％）

为什么内联块中宽度为100％的图像表现为响应图像

4 个答案: