Как масштабировать контейнер для содержимого изображения внутри?

У меня есть изображение внутри контейнера, который правильно масштабируется в зависимости от размера экрана. Проблема, которую я испытываю, заключается в том, что контейнер не будет масштабироваться с высотой.Как масштабировать контейнер для содержимого изображения внутри?

Я хотел бы, чтобы изображение полностью заполняло контейнер и сохраняло то же соотношение сторон изображения.

Это то, что у меня до сих пор:

.center-img { 
 
\t image-orientation: from-image; 
 
\t position: absolute; 
 
    margin: auto; 
 
\t top: 0px; 
 
\t right: 0px; 
 
\t bottom: 0px; 
 
\t left: 0px; 
 
\t width: 98%; 
 
\t height: auto; 
 
} 
 

 
.all-box-slideshow { 
 
\t padding: 5px 5px; 
 
\t width: 98.3%; 
 
\t height: auto; 
 
}

<div class="all-box-slideshow"> 
 
    <div> 
 
     <img class="center-img" src="images/image.jpg"> 
 
    </div> 
 
</div>

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

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

Спасибо в продвижении.

источник

2016-07-20 Elden Theaker

Привет Элден, добро пожаловать к переполнению стека. Не могли бы вы пояснить, как вы хотите, чтобы изображение появилось? Вы хотите, чтобы он занимал 100% от ширины или высоты контейнера? Или вы хотите, чтобы он заполнил оба? –

Я бы хотел, чтобы изображение полностью заполнило контейнер. –

Я очистил свой CSS и изменил свой IMG в DIV с красной каймой, чтобы мы могли видеть его. Я сделал контейнер с зеленым цветом, чтобы увидеть его тоже.

Дело в том, чтобы дать вашему img relative position, так что div вокруг него будет адаптироваться.

JS fiddle here for example

источник

2016-07-20 14:17:45 Relisora

Thats great! Большое спасибо за вашу помощь. –

Рад, что это помогло :) Чтобы помочь вам в том, почему ваш css не был чистым: 'height: auto' бесполезен, когда вы уже исправили свой элемент сверху и снизу. То же самое для ширины. Протрети я использовал «vh» и «vw» означает «высота видового экрана» и «ширина видового экрана» и означает, что он будет масштабироваться в зависимости от экрана и НЕ в зависимости от родителя. Получайте удовольствие от CSS :) – Relisora

Это заставит изображение полностью заполнить родительский контейнер и будет масштабироваться соответствующим образом.

.center-img { 
 
\t image-orientation: from-image; 
 
\t position: absolute; 
 
    margin: auto; 
 
\t top: 0px; 
 
\t right: 0px; 
 
\t bottom: 0px; 
 
\t left: 0px; 
 
    
 
\t width: 98%; 
 
\t height: 98%; 
 
} 
 

 
.all-box-slideshow { 
 
\t padding: 5px 5px; 
 
\t width: 98.3%; 
 
\t height: auto; 
 
}

<div class="all-box-slideshow"> 
 
    <div> 
 
     <img class="center-img" src="http://placehold.it/350x150"> 
 
    </div> 
 
</div>

источник

2016-07-20 14:11:35

Отлично, но возможно ли сохранить изображение в том же соотношении сторон исходного изображения? –

@ EldenTheaker Возможно, я не понимаю ваш вопрос. Вы хотите, чтобы родительский контейнер соответствовал размеру изображения? –

Как масштабировать контейнер для содержимого изображения внутри?

ответ

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