Responsive images in a responsive grid

Question

I've created a responsive grid which works great, but I would like to insert images into them that shrink when the grid does. This is my grid. What would I use to insert 1 image into each section below the heading?

<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>

jsfiddle Link here

Answer 1

you have already added:

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

So that will adjust your images accordingly. Also an image has a defined height already so you don't need to add height: auto. Setting either a width or a height will auto adjust the other one when it resizes.

FIDDLE