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％：

这是一个小提琴，其中图像和文字在所有大小调整上保持相同的宽度/大小：

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中添加max-width和max-height。

编辑：没看到第二部分。

要将文本注入数据标题，只需添加以下内容：

$(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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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>

Answer 2

这将解决第一个问题

figure {
  display: table;
  width:1%;
}

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: table;
  width: 1%;
}
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="http://www.fillmurray.com/460/300" 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>

换行父文/ css

2 个答案: