html - 仅 CSS : size of image container same width with respective to screen size in rows

Question

我一直在处理 5 行，这些行具有不同数量的图像，如代码和 fiddle 所示。

我在使图像容器的宽度相对于每行中的图像数量相同时遇到问题，就像在代码中第一行有大约 5 张图像，第二行有 2 张图像，我一直在尝试的是第二行的图像容器行应与第一行中的图像容器宽度相同

并且其中大多数图像的行应该占据 100% 的宽度，我已经尝试了很多来找出错误。我不想使用 JavaScript

HTML代码

<div class="con">
        <span style="display:table-cell;padding:11px;background-color:#D1D5D8;position:relative;">
             <span class="top-20-lable">a-block</span>
            <span style="display:block;text-align:right;margin-bottom:5px;">
                <span class="top-add-tags">Tag 1</span>
                <span class="top-add-tags">Tag 2</span>
            </span>
        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>


        </span>
    </div>


<div class="con">
    <span style="display: inline-block; padding: 11px; background-color: #D1D5D8; position: relative;">
        <span class="top-20-lable">b-block</span>
        <span style="display: block; text-align: right; margin-bottom: 5px;">
            <span class="top-add-tags">Tag 1</span>
            <span class="top-add-tags">Tag 2</span>
        </span>
       <div class="imgHolder">
            <img src="" /></div>

        <div class="imgHolder">
            <img src="" /></div>
        <div class="imgHolder">
            <img src="" /></div>
        <div class="imgHolder">
            <img src="" /></div>
    </span>
</div>


    <div class="con">
        <span style="display:inline-block;padding:11px;background-color:#D1D5D8;position:relative;">
             <span class="top-20-lable">c-block</span>
            <span style="display:block;text-align:right;margin-bottom:5px;">
                <span class="top-add-tags">Tag 1</span>
                <span class="top-add-tags">Tag 2</span>
            </span>
         <div class="imgHolder"><img src="" /></div>

        <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
            </span>
    </div>


    <div class="con">
        <span style="display:inline-block;padding:11px;background-color:#D1D5D8;position:relative;">
             <span class="top-20-lable">d-block</span>
            <span style="display:block;text-align:right;margin-bottom:5px;">
                <span class="top-add-tags">Tag 1</span>
                <span class="top-add-tags">Tag 2</span>
            </span>
        <div class="imgHolder"><img src="" /></div>
            </span>

    </div>


    <div class="con">
        <span style="display:inline-block;padding:11px;background-color:#D1D5D8;position:relative;">
             <span class="top-20-lable">d-block</span>
            <span style="display:block;text-align:right;margin-bottom:5px;">
                <span class="top-add-tags">Tag 1</span>
                <span class="top-add-tags">Tag 2</span>
            </span>     
         <div class="imgHolder"><img src="" /></div>
        <div class="imgHolder"><img src="" /></div>
            </span>

    </div> 

CSS

.con {

    width: 100%;
    margin: 10px;
    overflow: hidden;
    padding:2px;
    display: table;


}

.imgHolder{
  border:6px solid #D1D5D8;
  border-top:3px;
  width:240px;
  height:9vw;
  font-size:12px;
  text-align:left;
  display: table-cell;
  background-color:#fff;

}
.imgHolder > img{
  max-width:100%;
  max-height:100%;
  vertical-align:top;
}
.top-20-lable {
position:absolute;
left:20px;
top:10px;
font-weight: bold;
}
.top-add-tags {
    background-color:#009DD9;
    color:#fff;
    padding:2px 5px;
    font-size:12px;
}

JSFiddle

Answer 1

如果您使用的是 Bootstrap ，请将类 img-responsive 添加到图像中:

<img class="img-responsive" src="" />

如果没有，您可以像下面这样创建一个 css 类:

.image-responsive {
  height: auto;
  max-width: 100%;
}