Question

我有6张图片，我希望在调整屏幕大小时让它们响应。在中型设备上，必须在小型设备1图像上连续显示2个图像，以及我无法弄清楚如何使标题文本响应，当调整大小时它应该变小，我使用max-with为.overlay-头

这是我的代码：

更新：

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

图片响应

为了使图像响应，只需添加img-responsive类

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

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

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

类似上面的内容

当设备为中型时，如何使图像连续出现，而小型设备上则为1

1 个答案: