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

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

要创建响应式图像，您需要为其指定宽度或高度。例如，如果我们希望图像按宽度缩放，我们将宽度设置为 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>

Answer 2

您已经添加：

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

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

FIDDLE

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

Responsive images in a responsive grid

html

grid