#html #css
#HTML #css
Вопрос:
Я хочу, чтобы на моей веб-странице было изображение с разрешением 1200×300 с шириной, равной размеру экрана, и высотой 500 пикселей. Похоже, мой код не работает. Это мой CSS:
div.fix
{ /*min-width:100%;*/
/*width:100%;*/
width:2000px;
height:500px;
position:fixed;
display:block;
top: 0px;
}
<div class = "fix" ><img src="ARIA.png">
</div> <!-- I have tried inline styling as well. But it doesnt work -->
Я не думаю, что это может быть причиной, но это потому, что размер моего изображения меньше указанного размера?
Спасибо:)
Комментарии:
1. Может быть, это вам поможет. Пожалуйста, проверьте это link:-sitepoint.com/how-to-build-responsive-images-with-srcset
Ответ №1:
Попробуйте это:
.fix img{
width:100%;
height:500px;
}
<div class = "fix" >
<img src="http://placehold.it/1200x300">
</div>
Ответ №2:
Используйте свойство обложки размера фона
div.fix {
width:2000px;
height:500px;
position:fixed;
display:block;
top: 0px;
background-size:cover !important;
}
Ответ №3:
.fix img
{
width:2000px;
height:500px;
position:fixed;
display:block;
top: 0px;
}
<div class = "fix" ><img src="https://placeholdit.imgix.net/~text?txtsize=33amp;txt=350×150amp;w=350amp;h=150">
</div> <!-- I have tried inline styling as well. But it doesnt work -->