Max-height И максимальная ширина только с CSS

Первое сообщение для меня здесь.

Я использую div для обрезания миниатюр всех изображений в одинаковых пропорциях (180wx170h). Я застреваю при работе с портретом, а также с пейзажными изображениями. Если я использую это, что отлично подходит для изображений стиля портрета:

.crop img {max-height:170px; width:auto}

.. и отлично подходит для пейзажных образов:

.crop img {max-width:180px; height: auto;} is fine for landscape style images.

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

Я знаю, что это можно сделать легко с PHP, но я действительно знаю только CSS, так что это будет мое первое предпочтение.

Мне нужно поддерживать соотношение сторон изображения.

Ответ 1

Как я понимаю, у вас есть блоки 180x170 px, и вы хотите полностью их заполнить изображениями. Попробуйте переместить изображения на задний план и используйте background-size:cover.

Демо http://jsfiddle.net/heuku/1/

<div style="background-image:url(http://placekitten.com/100/200)"></div>
<div style="background-image:url(http://placekitten.com/200/100)"></div>
<div style="background-image:url(http://placekitten.com/200/200)"></div>

div {
  width:180px;
  height:170px;
  background-repeat:no-repeat;
  background-size:cover;
}

Обратите внимание, что это решение не работает в IE8 и ниже.

Ответ 2

решения после прохождения нагрузок других "решений"

max-width:100%;
max-height:100%;
height: auto;
width:auto;

Ответ 3

Изменить: Я улучшил решение, см. здесь: fooobar.com/questions/11321/...

Я использую это решение, которое я нашел, когда я пытался поместить и центрировать изображения на квадраты (или что-то еще). Он близок в сочетании, когда вы устанавливаете нижний слой и высоту 0 в его контейнер, что делает его отзывчивым с фиксированным отношением.

Работает в IE9 и выше. Для IE8 и ниже нужны некоторые хаки CSS.

HTML

.container {
    height: 0;
    padding-bottom: 100%; /* Or 75% for 4:3 aspect ratio */
    position: relative;
    overflow: hidden;
}
.container img {
    display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 75%;
    width: auto;
    height: auto;

    position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* Fallback for IE8 */
@media all\0 { 
    .container img {
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

Попробуйте здесь: http://jsfiddle.net/thiemeljiri/uhdm4fce/4/

Примечание: Если использование bootstrap изменяет класс .container на что-то еще.

Ответ 4

Вы можете попробовать

.crop img {max-height:170px; max-width:180px;}

Так как max-height и max-width являются максимумами, он должен работать. Браузер сделает изображение как можно большим, не перебирая ваши размеры.

Обратите внимание, что это непроверено, но на основе этой страницы W3Schools.

Надеюсь, это поможет!

Ответ 5

У вас есть ответ!

Try:

.crop img {max-height: 170px; max-width: 180px;}