Отзывчив на проблемы с изображениями в CSS-кодировании

Question

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

Я установил ширину на 100% и высоту на авто. Но даже в этом случае изображение не подходит должным образом.

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

Answer 1

Вы должны попробовать этот код. если я правильно понял, это то, что вы пытаетесь сделать.

сделать высоту изображения:100% (покрыть всю высоту контейнера); ширина: авто, чтобы сохранить соотношение сторон изображения и центрировать изображение.

увидеть фрагмент или jsFiddle

.container {
  height:700px;
  width:100%;
  position:relative;
  background:red;
  overflow:hidden;
}

<div class="container">
 <img src="http://lorempixel.com/1140/450/"  height="100%" width="auto" style="position:absolute;left:50%;transform:translateX(-50%)"/>
</div>