Responsive img with flexbox

Question

Hi and thanks to anyone replying to this post.

I have wrapped an img with an anchor tag and the img no longer shrinks as the page is resized. I know that flexbox only applies flex properties to child elements, so wrapping the img with an anchor would make it a grandchild. But even when applying flex to the anchor the image still fails to shrink.

.rightContent {
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    background: #375D81;
}

.leftContent {
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    background: #183152;
}

    <div class="rightContent">
        <h3>Date Added: 11/4/2016</h3>
        <p>dictum elit pretium. In sagittis euismod diam a pharetra. Nunc venenatis aliquet massa sed mollis. Nulla nec est metus. Aliquam in tortor </p>
        <a href="https://color.adobe.com/explore/most-popular/?time=all">
            <img src="http://placehold.it/350x150" alt="" /></a>
    </div>

    <div class="leftContent">
        <h3>Date Added: 11/4/2016</h3>
        <p>dictum elit pretium. In sagittis euismod diam a pharetra. Nunc venenatis aliquet massa sed mollis. Nulla nec est metus. Aliquam in tortor</p>
        <a href="http://lorempixel.com/"></a><img class="right " src="http://placehold.it/350x150" alt="" />
    </div>

Try giving the anchor `min-width: 0`. http://stackoverflow.com/q/36247140/3597276 — Michael Benjamin, Nov 08 '16 at 15:18
Didnt work im afraid. Thanks for the link though, was an interesting read. — Gelgamek, Nov 08 '16 at 15:29
could you please create a snippet with an example in order we could help? — Jordi Flores, Nov 08 '16 at 15:51

score 1 · Accepted Answer · edited May 23 '17 at 12:13

The image is not shrinking as the image is not constrained to the flex-item a - just use this:

a img{
  width: 100%;
}

and now the img will respect the dimensions of a. See here for more info on how we restrict the dimensions of images without affecting the intrinsic aspect-ratio.

.rightContent {
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    background: #375D81;
}

.leftContent {
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    background: #183152;
}
a img{
  width: 100%;
}

<div class="rightContent">
        <h3>Date Added: 11/4/2016</h3>
        <p>dictum elit pretium. In sagittis euismod diam a pharetra. Nunc venenatis aliquet massa sed mollis. Nulla nec est metus. Aliquam in tortor </p>
        <a href="https://color.adobe.com/explore/most-popular/?time=all">
            <img src="http://placehold.it/350x150" alt="" /></a>
    </div>

    <div class="leftContent">
        <h3>Date Added: 11/4/2016</h3>
        <p>dictum elit pretium. In sagittis euismod diam a pharetra. Nunc venenatis aliquet massa sed mollis. Nulla nec est metus. Aliquam in tortor</p>
        <a href="http://lorempixel.com/"><img class="right " src="http://placehold.it/350x150" alt="" /></a>
    </div>

Praveen Murali · Answer 2 · 2016-11-09T11:00:42.353

0

Wrap the second image inside the a tag(it's outside the a tag in your markup), ie

<a href="http://lorempixel.com/"><img class="right" src="http://placehold.it/350x150" alt="" /></a>

and apply the following CSS.

.leftContent a img,
.rightContent a img{
    max-width:100%;
}

edited Nov 09 '16 at 11:00

answered Nov 09 '16 at 09:53

Praveen Murali

701
3
9

Responsive img with flexbox

2 Answers2