Question

在我的网站上，我想在Photoshop中设计一个标题图片。它将通过max-width:100%响应。但是，在移动屏幕宽度，它应该更改为不同的图像，更适合该大小的屏幕。如何在HTML或CSS中完成？

Answer 1

而不是img标记使用标题的背景图片并在媒体查询中更改其src

像

@media only screen and (min-width : 1200px) {
    .header{
        background-image: url('img/myimg.jpg');
    }
}
@media only screen and (min-width : 992px) {
    .header{
        background-image: url('img/myimg2.jpg');
    }
}

@media only screen and (min-width : 320px) {
       .header{
            background-image: url('img/myimg3.jpg');
        }
    }

Answer 2

使用Media Query你可以做这样的事情，或者你可以将宽度改为适合你需要的宽度：

@media (max-width: 768px) {
  .className {
    //style goes here;
  }
}

选中此Link它会对您有所帮助

Answer 3

如果您使用核心CSS和HTML，则使用背景图像作为标题并修复背景大小。

.header{
        background-image: url('img/myimg.jpg');
        background-size:100% 100%;
    }

这将根据显示尺寸调整背景视图。

相反，您可以使用引导类来获得最佳响应性外观。

使用Bootstrap类：对于小屏幕：

<img id="logo" class="img-responsive hidden-lg hidden-md hidden-sm visible-xs" src="Images/small-header.png" />

对于大屏幕：

<img id="logo" class="img-responsive hidden-xs" src="Images/large-header.png" />

您可以将不同尺寸的图像用于不同尺寸的屏幕。

xs = Extra small,
sm = small,
lg = large,
md = medium,

参考bootstrap以获得更好的知识。

Answer 4

您可以在http://anzblog.com/2017/05/15/change-htmlcss-header-image-depending-page-width/

找到答案

如何根据页面宽度更改HTML / CSS标题图像？

4 个答案: