Масштабирование изображений пропорционально в CSS с максимальной шириной

Ответ 1

Вам нужно указать исходную ширину и высоту:

<img src="/whatever" width="100" height="200" alt="Whatever" />

И затем используйте что-то подобное в CSS:

#content img { max-width: 100%; height: auto }

Вы можете попробовать это с помощью jQuery, если у вас нет ширины и высоты спереди, но ваш пробег может отличаться:

$(function(){
    $('#content img').load(function(){
       var $img = $(this);
       $img.attr('width', $img.width()).attr('height', $img.height());
    });
});

Очевидно, замените #content на любой селектор, для которого вы хотите охватить функциональность.

Ответ 2

В отличие от принятого ответа, вы можете сделать это, не указав размер в HTML. Все это можно сделать в CSS:

#content img { 
    max-width: 100px;
    width: 100%;
    height: auto;
}

Ответ 3

при настройке использования постоянной ширины:

height: auto

Ответ 4

Вот как это сделать без Javascript. Установите max-width на нужную длину.

#content img { 
   max-width: 620px;
   height: auto;
}

Это работало для меня протестированным на Mac с Firefox 28, Chrome 34 и Safari 7, когда у меня не было настроек ширины и высоты, явно установленных в тегах img.

Не устанавливайте ширину в CSS до 100% после параметра max-width, поскольку один человек предложил, потому что тогда изображения, которые уже, чем ширина контейнера (например, значки), будут взорваны намного больше, чем хотелось бы.

Ответ 5

Используя ширину и максимальную ширину на изображении, закрутите IE8.

Поместите ширину на изображение и оберните его в div с максимальной шириной. (Затем проклинайте MS.)

Ответ 6

Я должен был сделать это со следующими требованиями:

• Страница не должна возвращаться при загрузке изображений. Размеры изображений известны на стороне сервера и могут быть сделаны расчеты.
• Изображения должны масштабироваться пропорционально
• Изображения не должны быть шире, чем содержащий элемент
• Изображения нельзя масштабировать, только при необходимости
• Должен использовать элемент img, а не фон, чтобы убедиться, что изображения также правильно печатаются.
• Нет JavaScript!

Самое близкое, что я придумал, - это страшное приспособление. Это требует трех элементов и двух встроенных стилей, но насколько я знаю, это лучший способ пропорционально масштабировать изображения. Все предложения height: auto; здесь отрицают точку указания размеров изображения на стороне сервера и вызывают скачок содержимого при загрузке.

.image {
  position: relative;
}

.image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<!-- container element with max-width prevents upscaling -->
<div class="image" style="max-width: 640px;">
  <!-- div with padding equal to the image aspect ratio to make
       the element the correct height -->
  <div style="padding-top: 75%;"></div>
  <!-- img scaled to completely fill container -->
  <img src="//placebear.com/640/480" />
</div>

https://jsfiddle.net/Lqg1fgry/6/ - Здесь есть "Hello", чтобы вы могли увидеть, будет ли контент после того, как изображение скачет.

Ответ 7

надеюсь, что еще не слишком поздно, но с этой страницей кода мне удалось получить пропорциональные изображения в моей галерее. это займет время, чтобы понять, что происходит, но попробуйте и наслаждайтесь.

<style>
div_base {
    width: 200px; // whatever size you want as constrain unchangeable
    max-width: 95%; // this is connected to img and mus exist
}
div_base img {
    width: auto !important;  // very important part just have it there!
    height: 95%;  // and this one is linked to maxW above. 
}
</style>

Ответ 8

function resizeBackground() {
    var scale=0; 
    var stageWidth=$(window).width(); 
    var newWidth=$("#myPic").width();
    var stageHeight=$(window).height();
    var newHeight=$("#myPic").height();
    if( $(window).width() > $(window).height() )  {
        scale = stageHeight/newHeight;
        scale = stageWidth/newWidth;
    } else {
        scale = stageWidth/newWidth;
        scale = stageHeight/newHeight;
    }
    newWidth = newWidth*scale;
    newHeight = newHeight*scale
    $("#myPic").width(newWidth);
    $("#myPic").height(newHeight);
}