如何防止图像框外的描述文字溢出？

Question

我已经使用自己的html和css编码制作了一个网站（www.carwahi.com），但是在为移动视图设计时遇到了问题。我已经以某种方式调整了图像，但无法调整描述部分。有些图像已经调整好了，但是有些正在产生问题。

我尝试了以下编码，请务必参考。

@media (min-width: 301px) and (max-width: 700px){

    .row1 img{width: 100%; height: auto; padding-right: 0; margin-right: 0; padding-left: 0; margin-left: 0;}
    .row1{width: 100%; padding-right: 0; margin-right: 0; padding-left: 0; margin-left: 0;}
    .column.middle{width: 100%; padding-right: 0; margin-right: 0; padding-left: 0; margin-left: 0; }
    .column.side{width: 100%; display: none;}
    .column.sidehome{width: 90%; height: auto; display: block; padding-top: 10px; padding-left: 20px;}
    .ntrq{display: none;}
    .column.middlehome{width: 90%; height: auto; display: block; padding: 10px; padding-left: 20px;}
    .column.fillhome1{width: 100%; padding: 10px 0; margin-right: 0; margin-left: 0;}
    .flipcontainer1{width: 100%; position: relative;}
    .flipback{width: 100%;}
    .containerhero1{max-width: 80%; height: 100%; position: relative;}
    .containerhero2{max-width: 100%; height: auto; position: relative; overflow: hidden;}
    .containerhero{max-width: 100%; position: absolute; margin-right: 0%; padding: 10px 0; margin-left: 0; padding-left: 20px; overflow: hidden;}
    .containerhero img{width: 100%; margin-right: 0%; padding: 0; margin-left: 0; overflow: hidden;}
    .containerhero .content{font-size: 12px;}
    .writing{width: 95%; margin-left: 2%;  margin-right: 2%; text-align: justify;}
    .headcon{width: 100%; font-size: 8px; text-align: center; padding-left: 0; padding-right: 0;}
    .headcon1{width: 100%; font-size: 4px; text-align: center; padding-left: 0; padding-right: 0;}
    .headcon2{width: 100%; font-size: 10px; text-align: center; padding-left: 0; padding-right: 0;}
    .homeback img{width: 100%; height: auto;}
    .homeback{width: 100%; padding: 20px 0;}

}

Answer 1

尝试将其添加到放置说明的元素的样式中。 您可以根据需要更改max-width。

max-width: 200px;

希望这对您有所帮助。

Answer 2

尝试一下：

@media (max-width: 700px) and (min-width: 301px)
    .containerhero img {
        height: 100%;
        /* width: 100%; */
        margin-right: 0%;
        padding: 0;
        margin-left: 0;
        overflow: hidden;
    }
    .containerhero .content {
        position: absolute;
        font-family: 'Playfair Display', serif;
        font-size: 18px;
        text-align: left;
        bottom: 10px;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5);
        color: white;
        width: 87%;
        padding: 10px;
    }
}