如何在不同分辨率下更改图像

Question

我目前有一个图像的标题（宽度= 1920px和高度= 250）它位于页面的最顶部，并且看起来很适合某些分辨率。 但当我得到一个实际改变我的屏幕尺寸的分辨率时，图像仍然是1920px然后允许我滚动。有没有办法缩小以适应页面？

Answer 1

您可以使用以下响应式图像代码： -

＆＃13;

＆＃13;

img {
  width: 100%;
  height: auto;
}

＆＃13;

＆＃13;

＆＃13;

否则，如果您有多种分辨率的图像，建议您使用媒体查询： -

＆＃13;

＆＃13;

//set width as per requirement

@media (max-width: 900px) {
  background-image: url(img/cover.jpg);
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

如何在标题中显示图像？使用img代码或使用background-image CSS属性？

• 如果您使用的是<img>代码，则需要设置max-width: 100%;
• 如果您使用background-image属性，则需要设置background-size: 100% auto;

希望这个帮助

由于

Answer 3

您可以使图像响应。

您可以使用bootstrap并为您的图片添加课程。

e.g

<img src="xyz.png" class="img-responsive">

OR

您可以手动尝试使用CSS规则使图像响应。

例如

max-width:100% !important;
max-height:100% !important;
display:block;