CSS для определения размера изображения

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

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

Прямо сейчас, у меня есть следующие:

.imageResizeAccountInfo 
{ 
    height: auto; 
    width: auto; 
    max-width: 25px; 
    overflow: hidden; 
}

Является ли это правильный способ добиться того, что я ищу делать?

источник

2013-12-13 user489041

Использование абсолютного значения vor max-width и height, установленное в auto, кажется мне прекрасным. Btw: Проверьте свойство _object-fit_, которое делает с изображениями то, что мы уже можем с фонами. Существует также полиполк. – kleinfreund

Вы можете использовать в CSS:

background-image: url("path/image.jpg") 
background-size: contain;

источник

2013-12-13 19:48:52

Но скажите, что я не хочу, чтобы он занимал все пространство контейнера? – user489041

Вы можете использовать размер фона: 25px auto; если вы хотите, чтобы ваш bg был 25px в поле 50px, высота будет автоматически скорректирована. –

Могу ли я предлагаю использовать:

background-image: url('yourimage.jpg');

background-size: contain;

который будет содержать фото, чтобы его высота & ширина родителя.

источник

2013-12-13 19:49:20

Но что, если контейнер скажет 50px на 50px. Я хочу, чтобы изображение было 25px на 25 px. Будет ли это работать? – user489041

Вы хотите сделать фоновое изображение div 25px x 25px. –

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

источник

2013-12-13 19:54:41

Используйте this guide для поддержания пропорций. Я использую его все время для фотографий и видеороликов (делает youtube видео супер простым для изменения размера).

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

С подобного HTML

<div class='imageResizeAccountInfo'> 
    <div class='content'>Aspect ratio of 1:1</div> 
</div>

Добавить CSS

.imageResizeAccountInfo{ 
    position: relative; 
    width: 100%; 
} 
.imageResizeAccountInfo:before{ 
    content: ""; 
    display: block; 
    padding-top: 100%; /* initial ratio of 1:1*/ 
} 
.content{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}

и некоторые дополнительные CSS для настройки

/* Other ratios */ 
.ratio2_1:before{ 
    padding-top: 50%; 
} 
.ratio1_2:before{ 
    padding-top: 200%; 
} 
.ratio4_3:before{ 
    padding-top: 75%; 
} 
.ratio16_9:before{ 
    padding-top: 56.25%; 
}

источник

2013-12-13 20:10:49

, если вам нужно только изменить размер изображения в наибольшем 25x25px и сохраните пропорции, которые вам нужно установить только

img { 
    max-width: 25px; 
    max-height: 25px; 
}

http://jsfiddle.net/3rfXa/

есть три случая, квадрат изображение будет уменьшено до 25x25, портрет изображение будет изменено до somethingx25 и ландшафт изображение будет изменено до 25xsomething (с чем-то меньшим или равным 25)

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

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

источник

2013-12-13 20:42:33 arieljuod

CSS для определения размера изображения

ответ

Смежные вопросы