javascript - 包装父文本/css

Question

我正在尝试在响应式图像下添加标题，因此我的代码如下所示

function showVideo(obj) {
  $("#youtube").attr("src", $(obj).data("src"));
  $('#videoModalLabel').text($(obj).data("title"));
  $("#videoModal").on("hide.bs.modal", function() {
    $("#youtube").removeAttr("src");
  }).modal('show');
}

figure {
  display: inline-block;
}
figcaption {
  margin: 10px 0 0 0;
  font-variant: small-caps;
  font-family: Arial;
  font-weight: bold;
  color: #bb3333;
}
figure {
  padding: 5px;
}
.vid img:hover {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
.vid img {
  transition: transform 0.2s;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
  padding: 1px;
  border: 1px solid #021a40;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row vid">
  <figure>
    <img class="img-responsive" src="resources/image/18/85/a.jpg" data-title='Want this to be same as figcaption' data-src="https://www.youtube.com/embed/path-to video?autoplay=1" onclick="showVideo(this)" />
    <figcaption>
      This is long text which overlaps the caption beside it I Want it to break automatically according to window size
    </figcaption>
  </figure>
</div>

这里我有两个问题:

我的标题很长，所以不碍事，我希望我的数据标题变成 <figcaption>所以我不必重写它

Answer 1

只需要使 img 宽度为 100%:

这是一个 fiddle ，其中图像和文本在所有调整大小时都保持相同的宽度/大小:

https://jsfiddle.net/h9kj04kv/

.vid img {
transition: transform 0.2s;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;   
   padding:1px;
  border:1px solid #021a40;
  width: 100%;
  }

如果你不想让它变得太大，那么只需在 vid div 中添加最大宽度和最大高度。

编辑:没看到第二部。

要将您的文本注入(inject)数据标题，只需添加:

$(function(){
   $('.img-responsive').attr('data-title', $(figcaption).text())

})

最后要保持图像与文本/标题的大小相同:

$(function(){
   figWidth = $(figcaption).width()
   $('.img-responsive').css('width', figWidth)
})

更新:如果您连续有很多视频，则需要创建一个网格系统。

<div class="row vid">
<div style="width: 25%; float:left;">
            <figure>
                <img class="img-responsive"  src="/image/lro0o.png?s=48&g=1" data-title='Want this to be same as figcaption' data-src="https://www.youtube.com/embed/path-to video?autoplay=1"  onclick="showVideo(this)" /> 
                <figcaption>
                    This is long text which overlaps the caption beside it I
                </figcaption>
            </figure>
</div>
<div style="width: 25%; float:left;">
            <figure>
                <img class="img-responsive"  src="/image/lro0o.png?s=48&g=1" data-title='Want this to be same as figcaption' data-src="https://www.youtube.com/embed/path-to video?autoplay=1"  onclick="showVideo(this)" /> 
                <figcaption>
                    This is long text which overlaps the caption beside it I
                </figcaption>
            </figure>
</div>
<div style="width: 25%; float:left;">
            <figure>
                <img class="img-responsive"  src="/image/lro0o.png?s=48&g=1" data-title='Want this to be same as figcaption' data-src="https://www.youtube.com/embed/path-to video?autoplay=1"  onclick="showVideo(this)" /> 
                <figcaption>
                    This is long text which overlaps the caption beside it I
                </figcaption>
            </figure>
</div>
<div style="width: 25%; float:left;">
            <figure>
                <img class="img-responsive"  src="/image/lro0o.png?s=48&g=1" data-title='Want this to be same as figcaption' data-src="https://www.youtube.com/embed/path-to video?autoplay=1"  onclick="showVideo(this)" /> 
                <figcaption>
                    This is long text which overlaps the caption beside it I
                </figcaption>
            </figure>
</div>
               </div>