Question

我尝试实施响应式网页来查看图片。为了做到这一点，我使用HTML5。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        .center{margin: 0px auto; display: block;}
    </style>
</head>
<body>
    <picture>
        <source media="print" srcset="https://www.mywebsiteurl/point_th@monochrome">
        <source media="(max-width: 480px)"
                srcset="https://www.mywebsiteurl/point_th@1x">
        <source media="(max-width: 640px)"
                srcset="https://www.mywebsiteurl/point_th@2x">
        <source media="(max-width: 1024px)"
                srcset="https://www.mywebsiteurl/point_th@4x">
        <img src="https://www.mywebsiteurl/point_th@4x" class="center">
    </picture>
</body>
</html>

这是我的手机网站（三星Galaxy S6 Edger）的视图：

从我的手机看，我看到我的照片周围有一个白色的空间。那么如何才能让它适合没有空格的屏幕呢？

Answer 1

尝试

* {
 margin: 0;
 padding: 0;
}

这会将所有元素的边距和填充设置为0，但请确保这是CSS文件中的第一件事。

您也可以尝试

picture {
 height: 100vh; // vh is viewport height
 width: 100vw; // vw is viewport width
}

Answer 2

必须是身体默认间距的问题

body在每个html页面中都有一个默认的间距，我们需要将它设置为0

body{
  margin:0;
  padding:0;
}

Answer 3

某些浏览器会有默认的正文边距。你可以通过以下方式删除它：

body {
    margin: 0px;
}

Answer 4

我和其他人有相同的答案，但我有一个建议添加

尝试使用reset css或Normalize。使用任何这些CSS文件都会有很大帮助，特别是在这种情况下回答中提到的代码如

std::string

已经存在于这些文件中。它有更多的内容可以删除浏览器的默认样式，并为您提供一种简洁明了的方法来定义自己的CSS。

如何显示适合手机屏幕的图像？

4 个答案: