Как максимальную ширину изображения ограничить реальной шириной изображения?

#css

На странице вставлена картинка:



img {
    display: block;
    width: 100%;
    max-width: 500px;
}


Максимальная ширина картинки - 500px. Если у нас ширина родителя меньше 500px, то
картинка занимает 100% ширины родителя. 

Но может быть так, что реальная ширина картинки меньше, чем 500px.

Как ограничить максимальную ширину картинки, если она больше 500px, и не растягивать
картинку до 500px, если картинка меньшей ширины?
    

Ответы

Ответ 1

Надо ограничивать наоборот: сколько надо, но не больше 100%:



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




Ответ 2

Сдается мне, что без JS тут не обойтись, а если это окажется так, то вот решение с ним.



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

  




  




  




  



Ответ 3

.parent{
  position:relative;
  text-align:center;
}
.parent img{
  max-width:500px;
  width:auto;
  display:inline-block;
}

  



Ответ 4

Есть такое свойство object-fit: scale-down;



img {
  display: block;
  width: 100%;
  max-width: 500px;
  object-fit: scale-down;
}




Ответ 5

Можно поставить max-width в реальную ширину картинки с помощью 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%;
}

  



Ответ 6

а что если ограничивать не картинку, а родителя?

вот пример для 200px

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


https://jsfiddle.net/vm6Lkppe/