Making width: responsive webkit-min-content

Navigation
0

I have a simple HTML snippet: 

<div>
    <img src="http://www.placehold.it/200x200"><p>LoremipsumdadeedaherpdederpIlikecoffeecoffeecoffee</p></div>

MyCSS:

div{max-width:webkit-min-content;max-width:-moz-min-content;}img{max-width:100%}

Fiddle: link

See how it looks in Firefox and shrink the window screen. This is the behavior I want: When space is available, the image is normal in size and the text will go under the image. When the image overflows, I want to shrink it. This works in Firefox.

However, the webkit version does not seem to work. Applying max-width:100% to the image causes the image to shrink to the length of the longer word in the paragraph.

Is there a fix for this in browsers -webkit, or is this a bug?

    
asked by anonymous 08.10.2014 / 16:32

1 answer

1

You can solve this problem by setting the size of the div where the other elements are.

Example: 

div {max-width: 100%;} 
img {max-width: 100%}

In this way, as in the example, it occupies the screen in its fullness (I mean the width) and only then is it responsive.

This will work in all browsers, as we apply a "universal" rule.

Note:

  • To set the width of div I used % to allow a "responsive" behavior, that is, to give adaptability of according to screen size.
08.10.2014 / 17:39
How do I save notification? Change column color with values above the limit