Центрированное и отзывчивое изображение в CSS

Спасибо за любую помощь заранее! Мне нужно, чтобы это изображение было центрировано, и в то же время высота должна уменьшаться при изменении размера окна браузера. Первое, что делается уже с flexbox. Но, к сожалению, высота остается прежней. Ширина изображения больше, чем область просмотра, и это преднамеренное предположение.

Пожалуйста, проверьте это здесь: https://jsfiddle.net/23nqgtz5/

HTML:

<div class="img-container">
 <img src="https://via.placeholder.com/1200x200" />
</div>

CSS:

.img-container {
  display: flex;
  justify-content: center;
}

нравится этот jsfiddle.net/n48wb3ra?

kukkuz 22.05.2019 18:03
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
1
47
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Оберните свой img в другой div и примените свойство flex: 1 1 auto;.

Дайте img max-width: 100%; и управляйте шириной изображения, используя дополнение .image

HTML

<div class="img-container">
  <div class="image">
    <img src="https://via.placeholder.com/1200x200" />
  </div>
</div>

Добавить ниже в CSS

.image {
    flex: 1 1 auto; 
    padding: 0 30px;
    text-align: center;
}
img {
  max-width: 100%;
}

Имейте в виду, flex не на 100% совместим со всеми браузерами.

Я хотел получить что-то вроде этого jsfiddle.net/e6umygs1/1, но ваш ответ сделал большую часть работы. Не могли бы вы взглянуть на это и сказать, это правильный подход?

Murakami 22.05.2019 18:47

@Murakami Если вы хотите, чтобы изображение располагалось по центру, удалите поля на .изображение и сделайте img ширина: 200%;

metaDesign 23.05.2019 10:06

Другие вопросы по теме