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

Question

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

0

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

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

Сейчас у меня есть следующее:

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

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

user489041 13 дек. 2013, в 21:31

Источник

0

Использование абсолютного значения vor max-width и height, установленного на auto, мне кажется вполне подходящим. Между прочим: проверьте свойство подгонки объекта, которое делает с изображениями то, что мы уже можем с фонами. Там также есть полифилл.
kleinfreund 13 дек. 2013, в 19:56

Теги:

html

css

5 ответов

Ещё вопросы

Использование абсолютного значения vor max-width и height, установленного на auto, мне кажется вполне подходящим. Между прочим: проверьте свойство подгонки объекта, которое делает с изображениями то, что мы уже можем с фонами. Там также есть полифилл.

arieljuod · Answer 1 · 2013-12-13T19-27-00.000Z

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

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

http://jsfiddle.net/3rfXa/

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

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

обратите внимание, что max-width и max-height не поддерживаются более старыми версиями

Simon Arnold · Answer 2 · 2013-12-13T18-42-00.000Z

0

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

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

Simon Arnold 13 дек. 2013, в 18:42

0

Но скажите, что я не хочу, чтобы он занимал все пространство контейнера?
user489041 13 дек. 2013, в 19:56
0

Вы можете использовать background-size: 25px auto; если вы хотите, чтобы ваш bg был 25px в окне 50px, высота будет автоматически отрегулирована.
Simon Arnold 13 дек. 2013, в 22:12

Joseph Spens · Answer 3 · 2013-12-13T17-42-00.000Z

Используйте это руководство для поддержания пропорций. Я использую его все время для фотографий и видеороликов (делает 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%;
}

Mr. Mayers · Answer 4 · 2013-12-13T17-28-00.000Z

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

Nick Carson · Answer 5 · 2013-12-13T17-06-00.000Z

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

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

&

background-size: contain;

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

Но что, если контейнер скажет 50 на 50 пикселей? Я только хочу, чтобы изображение было 25 пикселей на 25 пикселей. Будет ли это все еще работать?
Вы хотите сделать div фонового изображения 25px x 25px.