Question

有人知道如何获得img工作的最大宽度的解决方案吗？

    <div class="row">
    <div class="cell-content">
        hier komt de tekst met één of meer afbeeldingen<br>
         <img src="http://www.clker.com/cliparts/d/3/4/8/122620237858385735ivak_TV_Test_Screen.svg" width="800" border="0" alt="" />
    </div>
</div>

我的CSS：

.row {
    height:100%;
    width: 100%;
    display:table-row;
}
.cell-content {
    max-width: 100%;
    margin: 1%;
}
.cell-content img {
    max-width: 90% !important;
    height: auto !important;
}

Answer 1

你有（在你的js小提琴上，而不是上面的代码）

.cell-content {
 width: 100px;
 margin: 1%;
}

将其更改为

.cell-content {
 width: 100%; //Or whatever width you need
 margin: 1%;
}

Answer 2

图像的最大宽度取决于父容器。只需删除父容器宽度

即可

.cell-content { margin: 1%; }

Answer 3

工作正常

.cell-content的宽度减少到100px

和

.cell-content img max-width尝试继承除100px之外的父母，并使用90% 90px

因此，如果您需要为img设置更大的宽度，请不要为其父级设置宽度

Answer 4

尝试在%而不是px中设置父容器宽度的宽度，如下所示： Demo

.cell-content {   
    width: 50% !important;
    margin: 1%;
}
.cell-content img {
    max-width: 90% !important;
    height: auto !important;   
}

或尝试使用media query Demo

@media (max-width: 767px) {
    .cell-content {
    width: 90% !important;

}

max-width img无法响应

4 个答案: