Question

我有这个问题。我需要黄色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>

Answer 1

您在提供的代码段中有一些有冲突的CSS，我已修改代码以删除您在那里的.img_opcion CSS。图像很好地自动调整到容器中。

https://jsfiddle.net/Lvv7Lxrs/1/

编辑：宽度声明仅用于证明容器按大小捕捉，作为默认＆＃34;已损坏的图像＆＃34;浏览器替身有点小。

Answer 2

如果你添加一个div并在div中你在div中放了一个段落，如果你给div这样的规则css一个背景颜色：#color，div自动适合段落，你不一定要没有强制性地将宽度 - 高度固定。

table-cell适应图像

2 个答案: