Question

我正在尝试制作网页。它很顺利，但有一点我不明白。网站上有四个图像，两个图像下面有白色条纹。我会尝试附上一张关于它的图片。我希望有人可以解释原因。

另一个问题：你知道一个网站，你可以上传代码，有人检查并纠正它吗？所以我可以从中学习？我知道＆＃34;时间就是金钱＆＃34;，所以我不想免费。

include layout
   // PAGE-WRAPPER
   .page-wrapper
    a(href='strandok_planjka')
        figure.roombox
            img(src='img/strandok/planjka.jpg', alt='')
            figcaption
                .border.one
                    div
                .border.two
                    div
                h3 Planjka
    a(href='strandok_lukonie')
        figure.roombox
            img(src='img/strandok/image03.jpg', alt='')
            figcaption
                .border.one
                    div
                .border.two
                    div
                h3 Lokunie
    a(href='strandok_zrce')
        figure.roombox
            img(src='img/strandok/zrice.jpg', alt='')
            figcaption
                .border.one
                    div
                .border.two
                    div
                h3 Zrce
    a(href='strandok_babe')
        figure.roombox
            img(src='img/strandok/beach_babe2.jpg', alt='')
            figcaption
                .border.one
                    div
                .border.two
                    div
                h3 Babe beach
    include footer
// end: PAGE-WRAPPER

的CSS：

.roombox {
    position:relative;
    float:left;
    margin:0%;
    padding:0 0px 0 0;
    width:50%;
    max-width:100%;
    box-shadow:none !important;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    color:#ffffff;
    font-size:15px;

}
.roombox * {
    -webkit-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
}
.roombox img {
    max-width:100%;
    max-height:100%;
    vertical-align:top;
    opacity:1;
    background-size: cover;

Answer 1

正如评论中提到的那样，我认为这是因为你的图像有不同的宽高比（大小）。尝试配对相似尺寸的图像，或者如果您想要更改图像以适应，请移除max-width和max-height并指定height: 100%;，以便相应地调整宽度。

.roombox img {
    height:100%;
    vertical-align:top;
    opacity:1;
    background-size: cover;

图像下的白色条纹

1 个答案: