css - 如何使图像在中型设备上连续出现 2 个，在小型设备上连续出现 1 个

Question

我有 6 张图片，我想让它们在调整屏幕大小时响应。在中型设备上，必须连续显示 2 张图像，在小型设备上必须连续显示 1 张图像，而且我也不知道如何使标题文本也具有响应性，调整大小时它应该变小，我使用 max-with 作为 .overlay-标题

这是我的代码:

更新:

JsFiddle

HTML:

<div class="container">
  <div class="row">


    <div class="image-container">

            <div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
                <div class="img-block">
                            <img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
                </div>
                <div class="overlay-header">
                        <h1>Heading</h1>
                </div>
                <div class="text-overlay">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
                </div>
            </div>

            <div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
                <div class="img-block">
                            <img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
                </div>
                <div class="overlay-header">
                        <h1>Heading</h1>
                </div>
                <div class="text-overlay">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
                </div>
            </div>

            <div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
                <div class="img-block">
                            <img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
                </div>
                <div class="overlay-header">
                        <h1>Heading</h1>
                </div>
                <div class="text-overlay">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
                </div>
            </div>

                    <div class="image-portfolio  col-lg-3 col-md-4 col-sm-6">
                <div class="img-block">
                            <img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
                </div>
                <div class="overlay-header">
                        <h1>Heading</h1>
                </div>
                <div class="text-overlay">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
                </div>
            </div>

            <div class="image-portfolio  col-lg-3 col-md-4 col-sm-6">
                <div class="img-block">
                            <img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
                </div>
                <div class="overlay-header">
                        <h1>Heading</h1>
                </div>
                <div class="text-overlay">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
                </div>
            </div>

            <div class="image-portfolio  col-lg-3 col-md-4 col-sm-6">
                <div class="img-block">
                            <img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
                </div>
                <div class="overlay-header">
                        <h1>Heading</h1>
                </div>
                <div class="text-overlay">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
                </div>
            </div>

        </div>


  </div>
</div>

CSS:

.image-container {
    margin-top: 50px;
    text-align: center;
}


.image-portfolio {
    margin:2px;
  height: 250px;
  width: 30%;
  overflow: hidden;
}

.img-block img {
  height: 250px;
  max-width: 100%;
  float: left;
  transition: all 0.5s;

}

.overlay-header {
    position: absolute;
    max-width: 225px;
    height: 55px;
    background: rgba(202,205,206,.7);
    margin-top: 50px;

}

.overlay-header h1 {
    line-height: 20px;

}

.text-overlay {
  position: relative;
  text-align: center;
  font-size: 16px;
  line-height: 22px;
  bottom: 120px;
  color: white;
  visibility: hidden;
}

.image-portfolio:hover .img-block img {
    cursor:pointer;
    transform: scale(1.3);
}

.image-portfolio:hover {
    cursor:pointer;
}

.image-portfolio:hover .text-overlay {
  visibility: visible;
}

.image-portfolio:hover .img-block img {
  filter: brightness(40%);
}

Answer 1

因为您只想在中型设备上连续显示 2 张图像，您应该使用 col-md-6 类，这意味着在中型设备上的 12 列中，您的一张图像将占用 6 列。

然后您只想在小型设备上连续显示 1 张图像，您应该使用 col-sm-12 类，这意味着在小型设备上的 12 列中，您的一张图像将占据所有 12 列。

col-lg-3 表示在较大的设备上，将连续显示 4 张图像。

<div class="image-portfolio col-lg-3 col-md-6 col-sm-12">

供引用

.col-xs = *Extra small devices (ie Phones) (<768px)

.col-sm = Small devices (ie Tablets) (≥768px)

.col-md = Medium devices (ie laptops, or small desktops) (≥992px)

.col-lg = Large devices (ie Desktops) (≥1200px)*

Image Responsive

要使图像响应只需添加 img-responsive 类

<img class="img-responsive" src="link/to/your/image">

对于 header ，您必须以不同的宽度编写 css

@media(max-width:768px){
      h1{
          font-size:20px;
      }
}

类似上面的内容