图像下方有白色条纹答案

【问题标题】：White stripe under image图像下方有白色条纹
【发布时间】：2018-01-18 16:43:59
【问题描述】：

我正在尝试制作网页。进展顺利，但有一些我不明白的地方。网站上有四张图片，两张下面有白色条纹。我会尝试附上一张关于它的图片。我希望有人能解释原因。

另一个问题：您知道可以上传代码并有人检查并更正它的网站吗？那我可以借鉴一下吗？我知道“时间就是金钱”，所以我不想要免费的。

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;

【问题讨论】：

图片高度不同，底部为空白空间，以修复将较大的图像与较小的图像匹配。
尝试使用plnkr，您可以在线与您的代码交互并允许其他人使用它。至于白色条纹，我认为它是图像。 plnkr.co
标记的第一部分是什么？它不是 HTML。
亲爱的 lamCavic！是的，图像有不同的尺寸，但在较大的（2048*1365）下是条纹。

标签： css pug

【解决方案1】：

正如 cmets 中提到的那样，我认为这是因为您的图像具有不同的纵横比（大小）。尝试将相似尺寸的图片配对，或者，如果您希望将图片更改为适合尺寸，请删除 max-width 和 max-height 并仅指定 height: 100%;，以便相应地调整宽度。

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

【讨论】：