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

Ответ 1

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

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

Ответ 2

Размер управления и пропорция поддержки:

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

Ответ 3

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

Пример css:

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

Ответ 4

Try

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

Повторение в 2015 году:

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

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

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

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

Ответ 8

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

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

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

Ответ 9

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

Ответ 10

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

работал просто отлично для меня... Или я чего-то не хватает?

Изменить: Но см. Shawn, чтобы предупредить о его непредсказуемости.

Ответ 11

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

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

Ответ 12

img {
    max-width:100%;
}

div {
    width:100px;
}

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

Ответ 13

Вам всегда нужно что-то вроде этого

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

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

Ответ 14

Попробуйте следующее:

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

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

Ответ 15

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

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

Ответ 16

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

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

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