Отзывчивое изображение сохраняет пропорции и всегда находится в центре

Я хочу использовать css, чтобы изображение сохраняло его соотношение сторон (16: 9) и одновременно реагировало на него.Отзывчивое изображение сохраняет пропорции и всегда находится в центре

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

Я нашел this сообщение, и я попробовал решение Криса и решение Исаака. Но я не могу довести изображение до центра. Я пробовал использовать Bootstrap.

<div class="col-md-4">.col-md-4</div> 
<div class="wrapper col-md-4"> 
    <div class="main"> 
    This is your div with the specified aspect ratio. 
    </div> 
</div> 
<div class="col-md-4">.col-md-4</div>

или

<body> 
    <div class="col-md-4" id="wrap1">.col-md-4</div>   
    <div class="col-md-4" id="aspectRatio">Aspect Ratio?</div> 
    <div class="col-md-4" id="wrap2">.col-md-4</div>   
</body>

но все дивы появляются один под другим.

Любые идеи о том, как привести div в центр, используя Bootstrap или нет?

Благодаря

источник

2016-03-21 slevin

Я всегда кладу IMG в DIV и центром DIV с:

margin:0 auto;

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

источник

2016-03-21 23:16:36 Ryuk

Это будет центрировать ваш элемент на странице.

.element { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
}

Я считаю, что вы должны определить мин ширину или макс ширину вашего изображения на 100% контейнера, который находится в пропорции, что вы хотите для второй части вашего вопроса. Кроме того, если вам нужно динамически устанавливать соотношение сторон, всегда есть JS. У Qjuery есть функции, которые вы можете использовать, я думаю, что это будет сложно, если вы уже используете его внутри своего проекта.

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

-Вторы заголовок

--------- завернуть

- --------------- image

есть изображение как 100% размер обертки. имеют обертку относительно второго заголовка с шириной и высотой 100% относительно нее.

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

источник

2016-03-21 23:25:32 Judder

Отзывчивое изображение сохраняет пропорции и всегда находится в центре

ответ

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