0

我有一个摄影网站，我的目标是在页面上一个接一个地显示图像。非常非常简单。但是，该网站并未在桌面和移动平台上统一显示。到目前为止，该网站在 iPhone 5 和 S7 上非常完美。在某些具有较大 css 像素宽度的台式机和移动设备上，图像大小调整和居中存在问题。我不知道如何解决这个问题。我将包括下面的 html 和 css。提前致谢！

链接到网站点击这里访问网站

CSS

@media screen and (max-width: 320px) {
  /* Smaller Devices */
  img{
    width: cover;
    max-width: 100%;
    height: cover;
  }
}
@media screen and (min-width: 374px) and (max-width: 376px) {
  /* iPhone 6 */
  img{
    width: cover;
    max-width: 100%;
    height: cover;
  }
}

@media screen and (min-width: 319px) and (max-width: 321px) {
  /* iPhone 5 */
  img{
    width: cover;
    max-width: 100%;
    height: cover;
  }

}

@media screen and (min-width: 359px) and (max-width: 361px) {
  /* Galaxy S7 */
  img{
    width: cover;
    max-width: 100%;
    height: cover;
  }
}

@media screen and (min-width: 481px) {
  /* Desktops */
  img {
  width: cover ;
  max-width: 100% ;
  height: cover ;
  }
  .resize {
   width: 1024px; /* 1024 */
   height: 682px; /* 682 */  

  }
  .container {
    margin: 10px;
    width: 1260px;
    height: 1365px;
    line-height: 115px;
    text-align: center;
    border: 0px solid red;
   }


}

body {
   background-color: gainsboro;
}

HTML

<!DOCTYPE html>
<html>
<head>
<title>Outdoor Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="Grant Birkinbine, Birki, Grant, Photography, Outdoors" />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
</head>
<body>

        <img src="colo.jpg">
            <br><br>
            <img src="logo.png">
            <br>
            <img src="Description.png">
            <br><br>


            <div class='container'>
            <a href="The-Great-Outdoors.html"><img class="resize" src="/images/The-Great-Outdoors.jpg"></a>
            <br><br>
            <a href="Howelsen-Hill.html"><img class="resize" src="/images/Howelsen-Hill.jpg"></a>
            <br><br>
            <a href="Wind-And-Water.html"><img class="resize" src="/images/Wind-And-Water.jpg"></a>
            <br><br>
            <a href="In-The-Golden-Light.jpg"><img class="resize" src="/images/In-The-Golden-Light.jpg"></a>
            <br><br>
            <a href="The-Canyon.html"><img class="resize" src="/images/The-Canyon.jpg"></a>
            <br><br>
            </div>








</body>
</html>
4

2 回答 2

0

由于您.container的宽度固定/已知，因此您可以为左右两侧设置自动边距。看起来像这样：

margin: 0 auto;代替margin: 10px;

我还建议height: auto;在您的.resize图像上使用 a 。这样高度将自动设置，保持原始图像比例不变。当查看坐在岩石上的那个人的压扁照片时，这一点最为明显，因为它是一张高大（即肖像）照片。

希望有帮助！

于 2016-11-30T19:01:20.533 回答
0

我建议从改进标记开始：

  • 将图像包装在块元素中以防止内联空间
  • 在适当的地方使用figure标签

  • 将alt属性添加到图像以实现可访问性

于 2016-11-30T19:15:29.413 回答