Изображения растягиваются с использованием высоты: авто. Чем заменить это?
Я разработал веб-сайт, который отлично работает в последней версии Chrome 75.0.3770.142, в то время как старая версия не отображается должным образом, т.е. изображения растягиваются по вертикали.
Я использовал height:auto. Та же проблема возникает в Opera, Safari и IE. Последнее обновление Mozilla, как правило, работает нормально. Но старая версия дает ту же проблему.
Пожалуйста, помогите мне. У меня высота родительского элемента установлена на авто (так же, как медиа-запрос, показанный ниже), и я использовал flexbox для центрирования изображений.
@media only screen and (max-width: 414px){
#firstsec{
padding-top: 50px;
padding-bottom: 30px;
height: auto;
text-align: center;
background: url(aliali1.png);
background-size: cover;
background-repeat: no-repeat;
}
#firstsec h1{
font-size: 34px;
padding-bottom: 4px;
}
#firstseC#headerdesign img{
padding-top: 30px;
width:200px;
height:auto;
}<section id = "firstsec" class = "parallax col-12">
<div id = "headerdesign" class = "d-flex justify-content-center col-12">
<img class = "col-12 hello" src = "https://i.stack.imgur.com/vnaKJ.png" alt = "Cannot Load Image">
</div>
<div class = "d-flex justify-content-center col-12 animated tada"><h1>“Hello this is Ali!"</br>I'm an Engineer & i like Designing</h1></div>
<button class = "button button4 animated flash"><a href = "#secondsec">Check out my work !</a></button>
</section>
Я добавил. Спасибо!
ваш путь к изображению неверен, пожалуйста, добавьте путь к живому изображению, чтобы мы могли вам помочь.
img, вероятно, является гибким элементом, поэтому по умолчанию свойство align-items установлено на растяжение. попробуйте перезаписать это свойство выравнивание элементов
Ответы 4
Измените класс вашего изображения и вызовите адаптивный класс, а также убедитесь, что вы импортируете все классы Bootstrap.
Я думаю, что это дает ответ на вопрос.
Ваше изображение имеет ширину 3980. Используя height:auto, оно будет отображать изображение в полную высоту и масштабировать ширину (привязанную до 3980 пикселей). Вы пытались использовать
.hello{
width:100%;
}
так что ваше изображение не может быть больше, чем область просмотра родительского контейнера?
Спасибо за ваши ценные предложения. Я уже нашел решение. Проверьте мой ответ!
Просто добавьте свойство align-items:center в свою таблицу стилей к существующему свойству класса начальной загрузки, потому что по умолчанию его align-items:stretch. Пример ниже;
.justify-content-center{
align-items: center;
}
<div class = "col-lg-4 d-flex justify-content-center">
</div>
img.col-12.hello {
width: 100%;
}
@media only screen and (max-width: 414px){
#firstsec{
padding-top: 50px;
padding-bottom: 30px;
text-align: center;
background: url(aliali1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#firstsec h1{
font-size: 34px;
padding-bottom: 4px;
}
#firstseC#headerdesign img{
padding-top: 30px;
width:200px;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width">
<title>JS Bin</title>
</head>
<body>
<section id = "firstsec" class = "parallax col-12">
<div id = "headerdesign" class = "d-flex justify-content-center col-12">
<img class = "col-12 hello" src = "https://i.stack.imgur.com/vnaKJ.png" alt = "Cannot Load Image">
</div>
<div class = "d-flex justify-content-center col-12 animated tada"><h1>“Hello this is Ali!"</br>I'm an Engineer & i like Designing</h1></div>
<button class = "button button4 animated flash"><a href = "#secondsec">Check out my work !</a></button>
</section>
</body>
</html>
было бы лучше, если бы вы предоставили нам html-код, который реагирует на просмотр изображения