如何在移动设备上缩放图像并摆脱白边空白？

如何缩小图像以适应移动设备/平板电脑设备的尺寸？当它最小化到768像素和更低时，似乎还有一个白色边距和一个水平滚动条。我是否在bootstrap.css代码中解决这个问题？我究竟做错了什么？如何在移动设备上缩放图像并摆脱白边空白？

http://f13-preview.awardspace.net/groupeezz.dx.am/groupeezz3/index.html

我希望它有点像这样，当你将其缩小。我调整了媒体查询，但没有很好地显示。

2016-04-30 Sandy

缩放图像，使用百分比。恩...

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

没有看到所有你的CSS的，我最好的猜测与右页边距删除将与复位

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
}

开始你的CSS文件当您使用@media规则为移动或表格构建，意识到文档中存在更高级别的内容。因此，假设您想在桌面和移动设备上对所有这样的图像进行样式设置，以便摆脱顶部边距。

img { 
    width: 100%; 
    height: 100%; 
    margin-top: 200px; 
}

在手机上，您实际上需要指定您希望margin-top为零。例如，这仍然会显示margin-top：200px ...

@media screen and (max-width: 720px) { 
img { 
    width: 100%; 
    height: 100%; 
} 
}

而这实际上会移除移动设备上的顶部边距。

@media screen and (max-width: 720px) { 
img { 
    width: 100%; 
    height: 100%; 
    margin-top: 0px; 
}

如果您需要，欢迎进一步解释！ :) }

来源

2016-05-01 01:01:15

感谢您的帮助。我已经使用了100％的宽度和高度。它仍然不起作用。 – Sandy

我也修复了白边空白。我没有意识到这很容易。 -.- lol我刚刚进入bootstrap.css中的行类。至少我在学习哈哈.. 你也能告诉我这个家伙到底在说什么吗？我很迷茫。 https://www.sitepoint.com/community/t/something-is-wrong-with-the-navbar-in-the-css-code-how-do-i-fix-this/222799/3 if他告诉我你刚刚告诉我的同样的事情，比我用水平酒吧和白色右边的白色边缘解决了问题。我也认为行类是列类的父类。这是我老师告诉我们要做的。 – Sandy

如何在移动设备上缩放图像并摆脱白边空白？

回答

相关问题