我有这个问题。我需要黄色div适应所包含的图像;它的宽度是动态的,所以我不能使用固定的宽度。
我无法在任何地方找到解决方案,我尝试过使用margin: 0; display:block;
,但没有尝试。
以下是代码:
HTML
<div class="columna" style="max-width: 100%;">
<div class="s_container seleccion_simple_default">
<div id="text_opcion">
<div class="ti-ab-d" style="display: table-cell;">
<label for="test" ><p>Prueba</p></label>
</div>
</div>
<div class="ssm_opcion img_opcion">
<img src="images/opciones/mcdonalds.png">
</div>
</div>
</div>
CSS
.s_container{
margin: auto;
width: 100%;
height: 100%;
border-spacing: 0px;
overflow: hidden;
border: none;
position: inherit;
display: table;
}
.ssm_opcion{
width: 1px;
max-width: 100%;
overflow: hidden;
display: table-cell;
vertical-align: middle;
background:yellow;
}
.img_opcion{
display:;
width: auto;
max-width: 100%;
}
.ssm_opcion img{
width: auto;
max-width: 100%;
height: auto;
vertical-align: middle;
}
#text_opcion{
width: 100%;
height:100%;
min-width: 50px;
text-align: left;
display: table;
float: left;
background:green;
}
.ti-ab-d{
vertical-align: bottom;
text-align: right;
}
.s_container {
margin: auto;
width: 100%;
height: 100%;
border-spacing: 0px;
overflow: hidden;
border: none;
position: inherit;
display: table;
}
.ssm_opcion {
width: 1px;
max-width: 100%;
overflow: hidden;
display: table-cell;
vertical-align: middle;
background: yellow;
}
.img_opcion {
display: ;
width: auto;
max-width: 100%;
}
.ssm_opcion img {
width: auto;
max-width: 100%;
height: auto;
vertical-align: middle;
}
#text_opcion {
width: 100%;
height: 100%;
min-width: 50px;
text-align: left;
display: table;
float: left;
background: green;
}
.ti-ab-d {
vertical-align: bottom;
text-align: right;
}
<div class="columna" style="max-width: 100%;">
<div class="s_container seleccion_simple_default">
<div id="text_opcion">
<div class="ti-ab-d" style="display: table-cell;">
<label for="test">
<p>Prueba</p>
</div>
</div>
<div class="ssm_opcion img_opcion">
<img src="images/opciones/mcdonalds.png">
</div>
</div>
</div>
答案 0 :(得分:1)
您在提供的代码段中有一些有冲突的CSS,我已修改代码以删除您在那里的.img_opcion
CSS。图像很好地自动调整到容器中。
https://jsfiddle.net/Lvv7Lxrs/1/
编辑:宽度声明仅用于证明容器按大小捕捉,作为默认&#34;已损坏的图像&#34;浏览器替身有点小。
答案 1 :(得分:0)
如果你添加一个div并在div中你在div中放了一个段落,如果你给div这样的规则css一个背景颜色:#color,div自动适合段落,你不一定要没有强制性地将宽度 - 高度固定。