CSS - 如何使一个div宽度与其包含的img元素一样广。

Question

我有一个简单的div标记：

<div class="gallery__card">
    <img class="gallery__card__img" src="1.jpg">
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

但我希望gallery__card和gallery__card__img一样宽，这样图片下面的文本就不会占满整个页面宽度。

我希望避免设置固定宽度，因为这应该是响应式的。

有没有一种方法可以在不使用JS或固定宽度的情况下实现这一点？

jsfiddle: http://jsfiddle.net/6h19oa1q/

- Boel

Answer 1

.gallery__card 比 .gallery__card__img 更宽是因为你在 .gallery__card 中添加了 text。如果移除 text，.gallery__card 的宽度将保持与 .gallery__card__img 相同。请参见此处。

您可以设置您的 img 的宽度为100%并移除静态的 height 属性，就像 这里 一样，但是这样做必须确保维护您使用的所有图像的纵横比，否则您将会有不同的高度（如果这是一个问题的话）。

否则，您必须更改元素构造的方式。

- justinw

---

或者将.gallery__car的宽度设置为特定值，然后将.gallery__card__img的宽度设置为100%，高度设置为自适应。 - Mattia Nocerino

@MattiaNocerino height: auto 是隐含的，同时 OP 希望避免固定宽度，但这当然也是一个选项。 - justinw

Answer 2

非固定宽度的问题在这里似乎不适用，当你将一个div元素设为display：inline-block时，它会调整到其“最大”的子元素大小，而在这种情况下，文本没有宽度约束且不换行。

正如@Quoid在他的回答中提到的，您还可以使图像按比例缩放到width: 100％或height: 100％，具体取决于您的需要^[1,2]。

另一种解决方案可能是不使用基本的图像标签，而是使用另一个带有内联background-image: url(...)属性的div元素。虽然听起来很糟糕，但如果您想要一个强大的图像标签并且对一些内联CSS并不太在意，那么这是一个很好的替代方法。

关于纵横比的参考文献

1. http://daverupert.com/2012/04/uncle-daves-ol-padded-box/
2. 使用CSS保持div的纵横比

- SidOfc

---

background-image 是一个很好的方法；不过我不确定 OP 是否想要改变他的结构。 - justinw

因此，我将其作为“另一种解决方案”放在那里。总是很好地提供一个替代方案，以便在必要时给予帮助，而在这种情况下，由于无法使用no-width-if-possible约束条件，它是一个绝对的死胡同 :) - SidOfc

哦，我完全同意你的观点！我的评论是为了表扬你！ - justinw

我知道，不用担心 - 有一个上下文笑脸附加在其中：":)" - SidOfc

Answer 3

您可以使用JS（我使用jQuery解决），在每次迭代中，您都会查看具有选择器 img 的子元素，然后设置父元素的宽度。

$('.gallery__card').each(function() {
    var newWidth = $(this).children('img').width();
    $(this).width(newWidth);
});

例子：http://jsfiddle.net/cwp83vkq/

- areim

---

为什么要使用 JavaScript，当你可以轻松地使用 CSS 来完成它呢？ - Mattia Nocerino

这是一个可能的解决方案，也许不是最好的 :) 但它可以帮助某些人。一开始看起来很简单和清晰，我在做什么。 - areim

这是解决某些问题的好方法，但绝对不是解决这个问题的正确方式。原帖明确提到他正在追求响应式设计，而你的JS解决方案会使这变得更加困难。当尝试添加@media和其他标准CSS技术时，这个JS会成为阻碍。 - Racil Hilan

当然，我理解并感谢您的评论，但我认为如果我在这里保留我的答案，没有超级危险的风险，因为有人可以将其用于他的目的。 - areim

Answer 4

尝试这个 http://jsfiddle.net/6h19oa1q/5/ CSS

.gallery__card {
    margin-top: 10px;
    display: table;
    margin-right: 5px;
    border: 1px solid;
    width: 1%
}

.text {
    overflow: hidden;
}

.gallery__card__img {
    height: 100px;
}

- Nenad Vracar

Answer 5

这应该正好符合你的要求。您可以调整父元素的宽度，使其适合响应式布局。 HTML

    <a href='link/tofile.jpg'>
       <div class="gallery__card">
          <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
       </div>
    </a>

CSS（层叠样式表）

      .gallery_card {
       width: 300px;
       border: 1px solid #000;
       margin: 0 auto;
       height: 300px;
       background: url('link/tofile.jpg');
       background-size: cover;
       background-repeat: no-repeat;
       position: relative;
    }

      .gallery_card .text {
       position: absolute;
       color: #000;
       text-decoration: none;
       text-align: center;
       background-color: #fff;
       bottom: 0;
       left: 0;
       padding-top: 5px;
       padding-bottom: 5px;
    }

- Halycon

---

这个有两个问题，一个是OP试图避免使用width，尽管它是一个有效的解决方案，另一个是文本可能也需要响应式设计，这在使用position: absolute时会变得更加困难（虽然不是很严重，但并不是每个人都熟悉CSS中的定位）。 - SidOfc

+1 对于 width，但我认为使用 position: absolute 没有问题。在当前状态下没有指定高度或宽度，只是将文本固定在底部并通过一些填充来扩展以适应内容。 - Halycon

position: absolute 也会将元素从文档流中移除，就算是相对定位的父元素。我现在重新阅读这段内容，实际上同意 position: absolute 是可以的，尽管它不是一个完整的例子，但在响应式设计中它是可行的。 - SidOfc

Answer 6

尝试这个：jsFiddle 将此样式添加到您所有的图像中。

img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

并且从 .gallery__card__img 中移除所有高度限制。

- paravibe

---

指定最大宽度为100%有什么意义呢？这是多余的。更重要的是，将图像拉伸超出其实际大小会使它们看起来模糊不清。 - Racil Hilan

@RacilHilan max-width和width可能会重复，但是除非width: 100%达到大于图像尺寸的像素宽度，否则不会将图像拉伸到其实际大小。这是用户在使用width: 100%时应该注意的预防措施-拥有此width值是完全适当、有用和可接受的。 - justinw

当然，如果设计需要，将“width”值设置为100％是完全可以的。但是，将“max-width”也设置为100％是多余的，这是绝对不可以的。 - Racil Hilan

Answer 7

你在响应式设计中也定义宽度，但是你只是基于百分比或其他类似的方法。在你的情况下，你可以将容器的宽度设置为一些百分比，如50％，并将最大尺寸设置为图像的实际尺寸（因为如果你将它们拉伸到超过其实际尺寸，它们会变得模糊不清），即500px，然后将图像的宽度设置为容器的100％：

.gallery {
    overflow: hidden;
    -webkit-user-select: none;
    border: 1px solid red; /* This is just for testing */
    box-sizing: border-box; /* This is just for testing */
}
.wrapper {
}
.gallery__card {
    width: 50%;
    max-width: 500px;
    margin-top: 10px;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid;
}
.gallery__card__img {
  width: 100%;
}

<div class="gallery">
    <div class="wrapper">
        <div class="gallery__card">
            <img class="gallery__card__img width-1" src="http://www.cbre.us/o/losangelesmarket/AssetLibrary/GreaterLosAngelesMarket_mainimage.jpg">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        </div>
         <div class="gallery__card">
            <img class="gallery__card__img width-1" src="http://students.marshall.usc.edu/undergrad/files/2012/04/Selling-Your-Los-Angeles-Home1.jpeg">
            <div class="text">Sed at elit nec ligula pellentesque congue eget a elit. Sed in purus nisi. Nulla dapibus non est ac lacinia. Suspendisse potenti.</div>
        </div>
    </div>
</div>

- Racil Hilan