如何在移動設備上縮放圖像並擺脫白邊空白？

如何縮小圖像以適應移動設備/平板電腦設備的尺寸？當它最小化到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

如何在移動設備上縮放圖像並擺脫白邊空白？

回答

相關問題