Question

我已经在bootstrap上创建了图库，并根据屏幕宽度将每个img width从20%设置为98%。我试图在其右下角的每个img图库中添加标题。

<div id="galery">
  <a href="URL" class="GaleryItem"><img src="URL"></a>
  <a href="URL" class="GaleryItem"><img src="URL"></a>
  <a href="URL" class="GaleryItem"><img src="URL"></a>
  .
  .
  .
</div>

CSS：

#galery{
    width:100%;
    margin:0 auto;
}
@media only screen and (max-width: 1653px){
    a.GaleryItem>img{
        width:20%;
        height:auto;
    }
}
@media only screen and (max-width: 586px){
    a.GaleryItem>img{
        width:98%;
    }
}

如果标题随屏幕宽度的变化而变为img一角，该怎么制作标题？

我试过这个：

<div id="galery">
  <a href="/domy-galeria.php?active=1" class="GaleryItem" target="_blank">
    <img src="/img/mini/01min600.jpg" alt="domek nr1">
    <div class="nr-domku">01</div>
    .
    .
    .
  </a>
</div>

用这个css：

.nr-domku{
    position: absolute;
    bottom: -82px;
    right: 7px;
    background-color: #bbb;
    padding: 3px 9px 2px 15px;
    border-radius: 25px 0 25px 0;
}

Answer 1

你必须包装你的图像，或者只是将你的href用作包装，然后用绝对，底部：0和右边：0，text-align：right来定位你的标题。

.wrap {

}

*{
  margin: 0;
  padding: 0;
}
#galery{
  position: relative;
  display:inline-block;
}
#galery .wrap{
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
}
#galery img{
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
 }
#galery .caption{
  position: absolute;
  display: inline-block;
  width: 100%;
  height: auto;
  bottom: 0;
  right: 0;
  text-align: right;
  background: rgba(255,255,255, 0.8);
}
#galery .wrap p{
  font-family: sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 32px;
  color: #1d1d1d;
  padding: 5px;
}

<div id="galery">
  <a href="URL" class="GaleryItem">
    <div class="wrap">
      <img src="http://cdn.klubplus.com/pictures/images/000/000/802/original/628494-zmaizing-lake-bled-in-slovenia.jpg">
      <p class="caption">Something in bottom right.</div>
    </div>
  </a>
</div>

Answer 2

您可以将图片打包在div或figure中，将此包装设置为position: relative，然后使用image将同级文字插入position:absolute ，就像在例子中：
https://jsfiddle.net/wv8v3f9g/

＆＃13;

figure {
  position: relative;
  display: inline-block;
}

figcaption.cap-rb {
  position: absolute;
  display: inline-block;
  right: 5px;
  bottom: 5px;
}

＆＃13;

<figure>
  <img src="//placehold.it/150x100" />
  <figcaption class="cap-rb">Wow, a caption</figcaption>
</figure>

<figure>
  <img src="//placehold.it/200x100" />
  <figcaption class="cap-rb">Wow, a caption</figcaption>
</figure>

＆＃13;

如何在画廊的角落为响应式图像创建字幕？

2 个答案: