Question

我正在建立一个以英雄形象为主题的网站。目前图像的宽度为1560像素，但我担心它对于某些大型显示器来说还不够。我宁愿不要看到照片的边缘。

与此同时，我不想让移动用户拥有太大的图像来加载。

这里最好的妥协是什么？您是否应该根据显示尺寸加载不同的图像？

编辑：对不起我应该说我知道如何使图像填充100％的宽度，但我担心的是缺乏分辨率。我想我要问的是，对于最佳实践，您是否应该为不同的显示器加载不同的图像？

Answer 1

您的问题并未向我们提供有关如何创建英雄形象的任何提示。它是<img>还是作为div的背景，但这是我通常如何这样＆＃34;全宽＆＃34;英雄形象。

＆＃13;

body {
  margin: 0;
}

.hero {
  width: 100%;
  height: 300px;
  background-image: url('http://www.redcross.org/images/MEDIA_CustomProductCatalog/m17844381_TheHero_763x260_PRE.JPG');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.content {
  width: 480px;
  padding: 15px;
  margin: 0 auto;
}

＆＃13;

<div class="hero">
  
</div>
<div class="content">
  <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p>
  <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p>
  <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p>
</div>

＆＃13;

Answer 2

如果您担心分辨率，那么最好的方法是为不同的窗口大小加载不同的图像。如果您通过css加载图片，则会更容易，但如果您使用img标记，则可能需要使用Lister先生对使用<picture>标记的评论。但是，<picture>是实验性的，旧浏览器不支持它。

另一种方法是使用HTML和CSS的混合。

＆＃13;

@media only screen and (min-width: 1200px) {
        .below-1200px,
        .below-800px {
            display: none;
    }
    }
    @media only screen and (min-width: 800px) {
        .above-1200px,
        .below-800px {
            display: none;
    }
    }
        .above-1200px,
        .below-1200px {
            display: none;
    }

＆＃13;

<img class="above-1200px" src="http://placehold.it/1200x150"/>
    <img class="below-1200px" src="http://placehold.it/800x150"/>
    <img class="below-800px" src="http://placehold.it/400x150"/>

＆＃13;

不同显示器的英雄图像大小

2 个答案: