Question

想象一下以下代码......

<div style="border: 1px solid #000;"><img src="/images/me.png" style="float: right;"><!--100X250px--> How are you?</div>

或者这......

<li style="border: 1px solid #000;"><img src="/images/me.png" style="float: right;"><!--100X250px--> How are you?</li>

如果这些容器只包含文本，您会看到一个非常纤细的黑盒子（可能是25-50像素高），其中包含文本。事实上，这正是我所看到的 - 除了在容器上方或下方延伸的图像。

我知道如何调节图像宽度，但我该如何处理高度？我猜有两种选择：1）使每个图像适应其容器，或2）使容器高度适应图像。我认为第二种选择听起来更好。另外，我应该指出，每个容器包含的文本数量都在地图上;有些可能包含几段。

修改

抱歉，我遗漏了一条重要信息。大多数这些图像都浮动在文本的右侧或左侧。因此，我不希望图像跨越容器的宽度。我宁愿以某种方式使容器更高，因此图像不会突出。

无论如何，有没有人有任何处理这个问题的技巧？

Answer 1

您必须为图像指定一个width:100%规则，以告诉它伸展100％（不是更多）父容器。

如果你真的试图删除该规则，你会发现图像超出了容器大小。

在这里你可以看到一个例子：

＆＃13;

div{
  border:1px solid #000;
}

img{
  width:100%;
}

＆＃13;

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ex, voluptate rerum optio omnis dolorum, deleniti nemo, similique totam voluptatibus quae? Provident assumenda accusamus aliquid laudantium voluptate aperiam dolore! Deserunt!<img src="http://lorempixel.com/550/350/animals" alt=""></div>

＆＃13;

编辑：

如果图像浮动，我建议您使用两个div，一个用于文本，一个用于图像。

以下是一个例子：

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div {
  border: 1px solid #000;
}

img{
  width:100%;
}

.lfloat {
  width: 800px;
  margin: 0 auto;
}

.text,
.image {
  position: relative;
  float: left;
  width: 50%;
}

＆＃13;

<div class="lfloat">
  <div class="text">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quam, cupiditate, soluta expedita error et adipisci placeat ullam! Eveniet mollitia excepturi eum nesciunt ipsam nihil illo modi voluptas non voluptate.
    </p>
  </div>
  <div class="image"><img src="http://lorempixel.com/300/200/animals" alt=""></div>
</div>

＆＃13;

Answer 2

这会是一个开始吗？

＆＃13;

.container {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #ccc;
  vertical-align: top;
  height: 140px;
}
.cell.image {
  width: 140px;
  height: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain; 
}
.cell.image img {
  max-width: 100%;
  width: auto;
  height: 100%;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="cell image" style="background-image: url('http://lorempixel.com/450/300/nature')">      
    </div>
    <div class="cell text">
      Some text
    </div>
  </div>
  <div class="row">
    <div class="cell text">
      Some text
    </div>
    <div class="cell image" style="background-image: url('http://lorempixel.com/300/450/nature')">      
    </div>
  </div>  
</div>

＆＃13;

将图像限制在容器中

2 个答案: