2

I have a two column layout - fixed right column width, an scalable content in the left column.

The layout scales great with different screen sizes until I add images to the scalable column. If the container goes down to the size of the image it pushes the column too wide, squashing my 300px right column.

I set 

width:100%;

on the images, which solves the responsiveness issue, but when the container is full screen again the images scale to fill it, which is not what I want because it looks rubbish. I've added

max-width:100%;

which hasn't helped.

In short, I want the image behaviour to be "Be your real size, unless the container is smaller, in which case shrink."

(I should mention that my two-column layout is done with flexbox)

Edit: After playing around with this for ages, it turns out to be a difference in behaviour between broswers - Chrome scales the container, shrinking the image (as per max-width) but Firefox just pushes all the content out. Open this in each: https://jsfiddle.net/andyg1/sb7zefr5/

andyg1
  • 1,455
  • 3
  • 13
  • 21

5 Answers5

2

Remove width:100%; and keep max-width:100%;. This will keep images at their original size but shrink them to 100% width if the container is smaller.

Here's an example https://jsfiddle.net/v4kL409v/

fnune
  • 5,256
  • 1
  • 21
  • 35
  • No, doesn't work. I know it should, but not in this case. I wonder if it is because of something else up the tree - like the flexbox containers... – andyg1 May 05 '16 at 11:41
  • It works. If you have a different environment, then you should make a question that includes the environment. – fnune May 05 '16 at 11:41
  • But the JSFiddle you provided doesn't include the two-column container that I put in my question. I've tried it with floats and flexbox and the column with the image always takes priority over the the column of fixed width 300px. In float layout the 300px is pushed to the next row. In a flexbox layout the 300px column shrinks under 300px, but doesn't go to the next row, as you'd expect from flexbox. – andyg1 May 06 '16 at 07:51
  • I've added my own JSFiddle to the question, in an edit, which shows the behaviour, and how it is different between different browsers. Firefox does not appear to honour max-width in a flexbox container. – andyg1 May 06 '16 at 09:29
1

You can use width: 100% and the real size if the image or the maximum size of the conainer as max-width, for example

my_image {
  width: 100%;
  max-width: 320px;
}

That way it will shrink with the container, but not grow above a set size.

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • That would only work if I was happy to set the max-width at a know px size. I don't want to do that. Images could be different aspect ratios. A max width might look alright at one aspect ratio, weird for others. – andyg1 May 05 '16 at 11:44
  • 1
    you can use media queries with different max-width values. – Johannes May 05 '16 at 11:47
1

You can use an image as a background to your flex-item.

background-image, background-repeat, background-position, and most importantly background-size

* {
  margin: 0;
  padding: 0;
}
body {
  width: 100vw;
  height: 100vh;
}
.flex {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.bg {
  width: 50vw;
  height: 50vh;
  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center;
  background-size: contain;
  outline: 3px dashed red;
  flex: 1 0 50%;
}
.rt {
  width: 300px;
  height: 50vh;
  outline: 3px dashed blue;
}
<div class="flex">
  <figure class="bg"></figure>
  <figure class="rt"></figure>
</div>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
1

After identifying that the problem is different between Firefox and Chrome I did some research to find out that the problem can be fixed by adding:

min-width:0;

to the element containing the responsive. As discussed here: Firefox flexbox image width

Community
  • 1
  • 1
andyg1
  • 1,455
  • 3
  • 13
  • 21
0

Add display:block to image.

.my_image {
    display:block;
    max-width:100%;
    height:auto;
}
Ismail Farooq
  • 6,309
  • 1
  • 27
  • 47