Picture inserted on page:

<img src="img.jpg" alt="photo"> img { display: block; width: 100%; max-width: 500px; }

The maximum image width is 500px. If we have a parent's width less than 500px, then the picture occupies 100% of the parent's width.

But it may be that the real width of the image is less than 500px.

How to limit the maximum width of a picture, if it is more than 500px, and not to stretch the picture to 500px, if the picture is smaller?

  • Remove the width , leave only max-width - Yaant
  • If you remove the width, then if you decrease the width of the parent, the width of the picture will not decrease. The width of the picture will be fixed. - Frontender

6 answers 6

It is necessary to limit the opposite: how much is necessary, but not more than 100%:

 img { display: block; width: auto; height: auto; max-width: 100%; } 
 <img src="https://68.media.tumblr.com/avatar_20254e252d91_128.png" alt="photo"> <img src="http://cdn.fishki.net/upload/post/201411/26/1334081/57542_trava_priroda_doroga_leto_1920x1200_wwwgdefonru.jpg" alt="photo">

  • Everything works exactly as it should, but I can not understand why :-) Is 100% in your case - is this not the entire width of the parent block? - Frontender
  • All, but only the maximum width is indicated, i.e. literally: не шире родительского блока . - vp_arth

It seems to me that without JS there is not enough, and if this proves to be the case, then here is the solution with him.

 window.onload = function() { document.querySelectorAll('.parent img').forEach(function(item) { if(item.width >= 500) item.style.maxWidth = '500px' }); } 
 .parent{ position:relative; text-align:center; width: 600px; border: 1px solid; } .parent--200 { width: 200px; } .parent img{ max-width:100%; width: auto; display:block; margin: auto; } 
 <div class="parent parent--200"> <img src='http://placeimg.com/400/480/any'/> </div> <br> <div class="parent"> <img src='http://placeimg.com/400/480/any'/> </div> <br> <div class="parent parent--200"> <img src='http://placeimg.com/800/800/any'/> </div> <br> <div class="parent"> <img src='http://placeimg.com/800/800/any'/> </div> 

     .parent{ position:relative; text-align:center; } .parent img{ max-width:500px; width:auto; display:inline-block; } 
     <div class="parent"> <img src='https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg'/> </div>

    • The image can be any width. What are media queries for? - Frontender
    • corrected, as you ask, but then it will not be an adaptive option - kizoso
    • You now have a fixed-width picture. If the width of the parent is less than the width of the image, then the image must be 100% of the width of the parent. Sri changing the width of the parent changes the width of the picture. - Frontender

    There is an object-fit: scale-down; property object-fit: scale-down;

     img { display: block; width: 100%; max-width: 500px; object-fit: scale-down; } 
     <img src="https://68.media.tumblr.com/avatar_20254e252d91_128.png" alt="photo"> <img src="http://cdn.fishki.net/upload/post/201411/26/1334081/57542_trava_priroda_doroga_leto_1920x1200_wwwgdefonru.jpg" alt="photo">

    • one
      But his place is eating ... - Qwertiy ♦
    • There is such a thing, but the condition does not say about it - KAGG Design

    You can set max-width to the real width of the image using js.

     window.onload = function() { document.querySelectorAll('div img').forEach(function(img) { getImageRealSize(img.src) .then(size => img.style.maxWidth = size.width+'px'); }); } function getImageRealSize(src) { var img = new Image(); return new Promise(ok => { img.onload = function() { ok({ width: img.width, height: img.height }); }; img.src = src; }) } 
     div { max-width: 100%; } img { width: 100%; } 
     <div> <img src='http://placekitten.com/g/800/600'/> </div>

      and what if to limit not the picture, but the parent?

      here is an example for 200px

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

      https://jsfiddle.net/vm6Lkppe/

      • The question clearly states what you need. The parent has a width of 100%. - Frontender
      • Where does the question say that the parent has a width of 100%? - oleg kalenchuk
      • If the parent is not set to the width, then it is by default - 100% - Frontender