Question

我在调整黄色div中的图像时出现问题。我无法将max-width设置为100％，因为它会消失，也无法为div设置固定宽度，因为我需要它是动态的。如何在不设置宽度的情况下调整图像大小？

＆＃13;

.container{
  margin: 0px auto 0px auto;
  width: 100%;
  height: 100%;
  border-spacing: 0px;
  overflow: hidden;
  border: none;
  display: table;
}

.opcion{
  display: table-cell;
  background: yellow;
}

.opcion img{ }

.texto{
  width: 100%;
  display: table-cell;
  background: green;  
}

＆＃13;

<div class="container">
    <div class="opcion">
        <img src="https://www.google.com.ar/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">   
    </div>

    <div class="texto ti-ab-d">
        <label for="test"><p>Prueba</p></label>
    </div>
</div>

＆＃13;

Answer 1

尝试删除此

margin: 0px auto 0px auto;

Answer 2

您可以使用 Flexbox

执行此操作

.container{
  margin: 0px auto 0px auto;
  width: 100%;
  height: 100%;
  border-spacing: 0px;
  display: flex;
}

.opcion{
  background: yellow;
  flex: 0 1 auto;
}

.opcion img {
  width: 100%;
}

.texto{
  background: green; 
  flex: 1;
}

<div class="container">
    <div class="opcion">
        <img src="https://www.google.com.ar/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">   
    </div>

    <div class="texto ti-ab-d">
        <label for="test"><p>Prueba</p></label>
    </div>
</div>

Answer 3

试试这个:)这会拉伸我相信适合的图像

.opcion.image {
  background-image: url("file.png");
  height:100%;
  width:100%;
}

调整表格单元格中的图像大小

3 个答案: