Question

我已经创建了一个效果很好的响应式网格，但是我希望将图像插入到网格中，这些图像会在网格缩小时缩小。这是我的网格。我会用什么来将1张图片插入标题下方的每个部分？三江源

<div class="port">
          <div class="columns eight">
            <h1>Heading</h1>

            <p>Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. </p>
            </div>
          <div class="columns eight">
            <h1>Heading</h1>

            <p>Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. </p>
            </div>
          <div class="columns eight">
            <h1>Heading</h1>

            <p>Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. </p>
            </div>
          <div class="columns eight">
            <h1>Heading</h1>

            <p>Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. </p>
            </div>
            </div>

http://jsfiddle.net/5jr034bb/

Answer 1

您已添加：

img {
   max-width: 100%;
   height: auto;
}

这样可以相应地调整图像。此外，图片已经定义了高度，因此您无需添加height: auto。设置宽度或高度将在调整大小时自动调整另一个。

FIDDLE

Answer 2

要创建自适应图像，您需要为它们提供宽度或高度。例如，如果我们希望图像在宽度上缩放，我们将宽度设置为100％，将高度设置为自动。

.grid-half {
  margin: 5%;
  width: 40%;
  float: left;
}
.grid-half img {
  width: 100%;
  height: auto;
}

<div class="grid-half">
  <img src="http://example.com/image.jpg" />
</div>
<div class="grid-half">
  <img src="http://example.com/image.jpg" />
</div>

响应式网格中的响应式图像

2 个答案: