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/

Answer 1

.gallery__card宽于gallery__card__img的原因是因为您text中的.gallery__card。如果您移除text，它将保持与.gallery__card__img一样宽。请参阅here。

您可以将img设置为width: 100%并移除静态height属性，例如here，但是您必须确保保持所有宽高比你正在使用的图像;或者你会有不同的height s（如果这是一个问题）。

否则，您必须改变构建元素的方式。

Answer 2

非固定宽度的东西在这里似乎是不可能的，当你制作一个div元素display: inline-block时，它会调整到它的大小＆＃34;最大的＆＃34;在这种情况下，没有宽度约束的文本也没有。

在他的回答中提及 @Quoid ，您还可以根据需要将图片缩放到width: 100%或height: 100% ^{[1,2] < / SUP>}

另一种解决方案是可能不使用basic image tags，而是使用另一个{em>内联 div属性的background-image: url(...)元素。这听起来有多糟糕，如果你想在类固醇上有一个图像标签，并且对于某些内联CSS来说也不是OCD，这是一个很好的选择。

参考宽高比

Answer 3

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

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

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

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;
}

Answer 5

这应该完全符合你的要求。您可以使用父元素的width来使其适合响应式布局。

<强> 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;
    }

Answer 6

试试这个：jsFiddle

将此样式添加到您拥有的所有图像

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

并从.gallery__card__img

中移除所有高度限制

Answer 7

您还可以在响应式设计中定义宽度，但您只需将其基于百分比或其他类似方法。在您的情况下，您可以将容器的宽度设置为某个百分比（如50％），并将最大尺寸设置为图像的实际尺寸（因为如果将它们拉伸超出实际尺寸，它们看起来会模糊） 500px，然后将图像的宽度设置为容器的100％：

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

CSS - 如何使div与包含子img一样宽

7 个答案: