Изменить размер изображения пропорционально с помощью CSS?

Чтобы пропорционально изменить размер изображения с помощью CSS:

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

Контролируйте размер и сохраняйте пропорции:

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

Если это фоновое изображение, используйте background-size: contain.

Пример css:

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

Пытаться

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

Вы можете использовать свойство object-fit:

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

Это подойдет под изображение, не меняя пропорционально.

Обратите внимание, что width:50% изменит его размер до 50% доступного пространства для изображения, а max-width:50% изменит размер изображения до 50% от его естественного размера. Это очень важно учитывать при использовании этих правил для мобильного веб-дизайна, поэтому для мобильного веб-дизайна всегда следует использовать max-width.

ОБНОВЛЕНИЕ. Вероятно, это была старая ошибка Firefox, которая, похоже, уже исправлена.

Чтобы масштабировать изображение с сохранением его соотношения сторон

Попробуй это,

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

Повторно посещено в 2015 году:

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

Я пересмотрел его, так как все распространенные браузеры теперь работают автоматически, предложенные Шерифом выше, так что это работает даже лучше, поскольку вам не нужно знать, если изображение шире, чем выше.

более старая версия: если вы ограничены рамкой 120x100, например, вы можете сделать

<img src="http://image.url" height="100" style="max-width: 120px">

Свойства css max-width и max-height работают отлично, но не поддерживаются IE6, и я считаю, что IE7. Вы можете использовать это по высоте / ширине, чтобы случайно не увеличить изображение. Вам просто нужно пропорционально ограничить максимальную высоту / ширину.

<img style="width: 50%;" src="..." />

у меня отлично сработало ... Или я что-то упустил?

Изменить: Но обратите внимание на предупреждение Шона о случайном увеличении размера.

img{
    max-width:100%;
    object-fit: scale-down;
}

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

Я считаю, что это самый простой способ сделать это, также можно использовать встроенный атрибут style в теге <img>.

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

<img src="flower.png" class="scaled">

or

<img src="flower.png" style="transform: scale(0.7);">

Используйте эту простую технику масштабирования

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

img {
    max-width:100%;
}

div {
    width:100px;
}

с этим фрагментом вы можете сделать это более эффективно

Мы можем изменить размер изображения с помощью CSS в браузере, используя медиа-запросы и принцип адаптивного дизайна.

    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}

Вам всегда нужно что-то подобное

html
{
    width: 100%;
    height: 100%;
}

в верхней части вашего файла css

Попробуй это:

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}

image_tag("/icons/icon.gif", height: '32', width: '32') Мне нужно установить высоту: '50px', ширину: '50px' для тега изображения, и этот код работает с первой попытки, обратите внимание, я попробовал весь приведенный выше код, но не повезло, поэтому он работает, и вот мой код из моего _nav.html .erb:
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>