Как обрезать и центрировать изображение полной высоты, когда я не знаю размеры контейнера?

65
4

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

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

Конечная цель состоит в том, чтобы иметь сетку с 3 квадратными изображениями в строке, которые сокращаются в зависимости от ширины браузера.

Вот что я до сих пор.

.i-om-section-content {
max-width: 800px;
border: 3px solid blue;
margin: 0 auto;
padding: 0 32px;
padding: 0 3.2rem;
position: relative;
z-index: 2;
}
.i-om-item {
overflow: hidden;
margin: 10px;
position: relative;
width: 32.5%;
height: 0;
padding-bottom: 32.5%;
border: 1px solid;
float: left;
}
img {
position: absolute;
left: -100%;
right: -100%;
top: 0;
bottom: 0;
margin: auto;
min-height: 100%;
min-width: 100%;
}
<div class="i-om-section-content">
<div class="i-om-item">
<img src="http://onetaste.us/wp-content/uploads/2015/10/DSC2641.png" />
</div>
<div class="i-om-item">
<img src="http://onetaste.us/wp-content/uploads/2015/10/smita.png" />
</div>
</div>

JSFiddle

спросил(а) 2021-01-19T18:38:30+03:00 9 месяцев назад
1
Решение
65

Вообще говоря, если вы хотите более продвинуть обрезку/позиционирование/размер изображений, гораздо проще работать с ними в качестве фоновых изображений. background-size:auto 100% означает "авто ширина, полная высота", остальная часть - это то, что у вас уже было.

<div class="i-om-section-content">
<div class="i-om-item one">
</div>
<div class="i-om-item two">
</div>
</div>

-

.i-om-section-content {
max-width: 800px;
border: 3px solid blue;
margin: 0 auto;
padding: 0 32px;
padding: 0 3.2rem;
position: relative;
z-index: 2;
}
.i-om-item {
overflow: hidden;
margin: 10px;
position: relative;
width: 32.5%;
height: 0;
padding-bottom: 32.5%;
border: 1px solid;
float: left;
background-size:auto 100%;
background-size:center center;
}
.one{
background-image:url("http://onetaste.us/wp-content/uploads/2015/10/DSC2641.png");
}
.two{
background-image:url("http://onetaste.us/wp-content/uploads/2015/10/smita.png");
}

https://jsfiddle.net/ammsh4y5/

ответил(а) 2021-01-19T18:38:30+03:00 9 месяцев назад
65

Смотрите эту обновленную скрипку.

Он использует jQuery для установки высоты и ширины контейнера одинаково (сделайте его квадратным). Затем он устанавливает высоту изображения в высоту div. Наконец, он центрирует изображение, получая разницу в ширинах изображения и div, деля его на два и перемещая его так сильно (абсолютное позиционирование).

Здесь также был изменен код jQuery (CSS и HTML):


function updateImage() {
$("img").each(function() {
var parent = $(this).parent();
parent.height(parent.width());
$(this).height(parent.height());
$(this).css("left", -($(this).width()-parent.width())/2);
});
}

// call on window resize and on load
$(window).resize(function() {
updateImage();
});
updateImage();

Это не самое элегантное решение, но оно делает эту работу и довольно интуитивно понятное. (Но мне нравится решение @DylanWatt background-image: гораздо более творческий).

ответил(а) 2021-01-19T18:38:30+03:00 9 месяцев назад
46

.i-om-section-content {
max-width: 800px;
border: 3px solid blue;
margin: 0 auto;
padding: 0 32px;
padding: 0 3.2rem;
position: relative;
z-index: 2;
}
.i-om-item {
overflow: hidden;
margin: 10px;
position: relative;
width: 32.5%;
height: 0;
padding-bottom: 32.5%;
border: 1px solid;

display:inline-block;
background-position:center center;
}
.one{
background-image:url("http://onetaste.us/wp-content/uploads/2015/10/DSC2641.png");
}
.two{
background-image:url("http://onetaste.us/wp-content/uploads/2015/10/smita.png");
}
<div class="i-om-section-content">
<div class="i-om-item one">
</div>
<div class="i-om-item two">
</div>
</div>

ответил(а) 2021-01-19T18:38:30+03:00 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема