Question

我一直试图将放置在页面中的图像设置为100％宽度，但是左侧的某些内容始终留有空白。我尝试过

.coverImage {
         width: 100vw;
   }

那没有解决，所以我用了：

.coverImage {
         width: 100%;
   }

但是似乎没有任何效果。另外，我仅在左侧留有空白。附带的屏幕截图为here。此屏幕快照还显示了脚本。

Answer 1

尝试重置边距：

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    min-height: 100%;
}

我将html和body的宽度设置为100％的原因是为了确保图片的条幅宽度％达到整个视口，因为百分比大小（和em大小，一种）相对于它的父母。

Answer 2

HTML实际上实际上已经“内置”了基本的CSS。如果您创建一个index.html，并且只有<h1>hello there</h1>，您会发现它既大又粗。还存在默认边距，这可能就是您遇到的情况。

您可以执行mazunki的将边距设置为0的答案，

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    min-height: 100%;
}

这会将所有垃圾重置为0的余量，但是在CSS中工作时我想包含的内容是reset.css文件。该文件的作用是重置全部基本的HTML样式，因此您将来不必再处理项目。

您可以在css文件的开头打这个坏蛋，或制作一个单独的reset.css文件。如果您制作自己的文件，请确保先在您的HTML中将您的实际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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

祝你好运！

Answer 3

您的宽度设置为“ 100vh”，这意味着它与屏幕高度一样宽，将其更改为“ 100vw”并添加“ margin：0;”

无法将元素缩放到100％的宽度

3 个答案: