Question

朋友们！我试图制作一个连续出现的灵活图像网格。我甚至不需要额外的div属性，工作正常

<div class="container_imggrid"> <img> </div>

的CSS

.container_imggrid img {
    display: inline-block;
    max-width: 25%;
    height: auto;
}

但是现在我需要在我的图片上方添加文字，Div与文字也应该是灵活的。你可以在这个页面http://www.reebok.com/us看到我的意思。这个大图像用＆＃34;开始设计＆＃34;标志是灵活的，直到某一点，以及它上面的文字。我的网格元素需要类似的Header属性，但是无法正确定位我的文本块。

你能帮帮我吗？也许我需要这些功能的绝对另一个网格基础？

我的互动小提琴在这里：https://jsfiddle.net/CapablancaYEAH/yr809ty8/

P.S。为了使事情更清楚，让我重新说一句。我需要灵活的网格。每个单独的网格块都是 Square DIV，图像位于图像顶部，居中标题位于图像顶部。图像应调整大小并相应地适合div的宽度/高度（浏览器窗口大小更改）。任何浏览器窗口调整大小后，标题应保持以div为中心。

Answer 1

只需将position:relative设置为父div，将position:absolute with top and left 50%设置为h2标记。

＆＃13;

.container_banner{position:relative;}
.container_banner img{width:100%;height:auto;}
.container_banner h2{position: absolute;  
   right: 0;
   width: 50%;
   left: 0;
   margin: 0 auto;
   text-align: center;
   top: 44%;}
.container_imggrid{width:25%;}

＆＃13;

<div class="container">
        <div class="container_banner">
        	<h2>Swimming</h2>
            <img src="https://i.yapx.ru/JEvD.jpg" width="1000" height="300">
        </div>
     <div class="container_imggrid container_banner">
            <h2>Swimming</h2>
            <img src="https://i.yapx.ru/JEvC.jpg" width="500" height="500" alt="Подводное плавание">
    </div>
 </div>

＆＃13;

确保您的父div宽度与<img>标记相同。它应该是相同的，否则你需要在父div中的背景中设置你的图像。

希望这对你有所帮助。

感谢。

Answer 2

使用position: relative（对于父级）和position: absolute（对于孩子）

https://jsfiddle.net/kaskull/yr809ty8/4/

Answer 3

您可以在每个阶段使用媒体查询来处理不同屏幕尺寸的文字大小，例如：

@media only screen and (min-width: 360px){
    .flx-text{
        font-size:1em;
    }
}

示例小提琴（尝试调整效果）：

JSFIDDLE

Snippet [全屏显示并调整效果]：

＆＃13;

.container_banner {
  padding-bottom: 15px;
}

.container_banner img {
  max-width: 100%;
  height: auto;
}

.container_imggrid img {
  display: inline-block;
  max-width: 25%;
  height: auto;
}

.container_imggrid h2 {
  display: block;
  position: fixed;
  max-width: 50%;
}

@media only screen and (min-width: 360px) {
  .flx-text {
    font-size: 0.9rem
  }
}

@media only screen and (min-width: 390px) {
  .flx-text {
    font-size: 1.0rem
  }
}

@media only screen and (min-width: 420px) {
  .flx-text {
    font-size: 1.1rem
  }
}

@media only screen and (min-width: 450px) {
  .flx-text {
    font-size: 1.2rem
  }
}

@media only screen and (min-width: 480px) {
  .flx-text {
    font-size: 1.3rem
  }
}

@media only screen and (min-width: 510px) {
  .flx-text {
    font-size: 1.4rem
  }
}

@media only screen and (min-width: 540px) {
  .flx-text {
    font-size: 1.5rem
  }
}

@media only screen and (min-width: 570px) {
  .flx-text {
    font-size: 1.6rem
  }
}

@media only screen and (min-width: 600px) {
  .flx-text {
    font-size: 1.7rem
  }
}

@media only screen and (min-width: 630px) {
  .flx-text {
    font-size: 1.8rem
  }
}

@media only screen and (min-width: 660px) {
  .flx-text {
    font-size: 1.9rem
  }
}

@media only screen and (min-width: 690px) {
  .flx-text {
    font-size: 2.0rem
  }
}

@media only screen and (min-width: 720px) {
  .flx-text {
    font-size: 2.1rem
  }
}

@media only screen and (min-width: 750px) {
  .flx-text {
    font-size: 2.2rem
  }
}

@media only screen and (min-width: 780px) {
  .flx-text {
    font-size: 2.3rem
  }
}

@media only screen and (min-width: 810px) {
  .flx-text {
    font-size: 2.4rem
  }
}

@media only screen and (min-width: 840px) {
  .flx-text {
    font-size: 2.5rem
  }
}

@media only screen and (min-width: 870px) {
  .flx-text {
    font-size: 2.6rem
  }
}

@media only screen and (min-width: 900px) {
  .flx-text {
    font-size: 2.7rem
  }
}

@media only screen and (min-width: 930px) {
  .flx-text {
    font-size: 2.8rem
  }
}

@media only screen and (min-width: 960px) {
  .flx-text {
    font-size: 2.9rem
  }
}

@media only screen and (max-width: 360px) {
  .flx-text {
    font-size: 0.8rem
  }
}

＆＃13;

<div class="container">
  <div class="container_banner">
    <img src="https://i.yapx.ru/JEvD.jpg" width="1000" height="300">
  </div>

  <div class="container_imggrid">
    <h2 class="flx-text">Swimming</h2>
    <img src="https://i.yapx.ru/JEvC.jpg" width="500" height="500" alt="Подводное плавание">
  </div>
</div>

＆＃13;

Answer 4

毕竟，我能够找到解决方案。它使用了

的技巧

 font-size: 0;

请参阅https://jsfiddle.net/CapablancaYEAH/68aqv37b/

如何在柔性图像上放置文本？

4 个答案: