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

Question

Сейчас я использую максимальную ширину для масштабирования изображений. Однако они не масштабируются пропорционально. Есть ли способ заставить это произойти? Я открыт для Javascript / jQuery.

Если возможно, есть ли способ сделать это, не зная исходных размеров изображения (возможно, определите это с помощью Javascript / jQuery)?

Answer 1

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

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

Answer 2

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

<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 на любой селектор, для которого вы хотите расширить функциональность.

Answer 3

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

height: auto

Answer 4

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

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

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

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

Answer 5

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

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

Answer 6

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

1. Страница не должна перерисовываться при загрузке изображений. Размеры изображений известны на стороне сервера, и можно производить расчеты.
2. Изображения должны пропорционально масштабироваться
3. Изображения не должны быть шире, чем содержащий элемент
4. Изображения не должны увеличиваться, только при необходимости уменьшаются
5. Для правильной печати изображений необходимо использовать элемент img, а не фон
6. Нет 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" есть, чтобы вы могли видеть, переходит ли содержимое после изображения.

Answer 7

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

Поместите ширину на ваше изображение и оберните его в div, который имеет максимальную ширину. (Тогда прокляни MS.)

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