javascript - 如何在不改变宽高比的情况下强制图像和视频适合 div ？

Question

如何在不改变宽高比的情况下强制将图像和视频放入 div 中？

这是呈现的 html，我正在使用 Bootstrap 来保持我的网站响应。

        <div id="micropost-208">

          <div class ="jumbotron" style="background-color: #FFF; max-width: 100%; background-repeat:no-repeat;background-size:cover;background-position:center;border-top-left-radius:0px;border-top-right-radius:0px;">

            <div class="row paddingleft paddingright" style="padding-left:0;padding-right:0">

              <div class="col-md-12 wordwrap">

                <p><p style="text-align: center;"><strong>Hello everybody</strong></p><p>A topic that I discussed within 45 seconds . I want to tell you now about it . As it deserves more time . The topic was '' One individual can have a great impact on a group or community . Select one person, explain how this person has affected the others in the community .</p><p>My husband , the doctor who had to work for two years in a village far away near Turkey , had a great impact on the people living there . Those people didn't use to send the girls to school . Moreover by age 11-12 girls there should be prepared to get married . So you can imagine a wife , house wife and a mother at age eleven or twelve . But Safa , my husband ,succeeded to stop this phenomena . It took him time to convince people there to let the girls attending schools and continue studying at university . Safa was able to change that community .</p><blockquote> I don't forget that scene in 2003, while I was looking out of the window I saw many girls wearing their beautiful blue uniform with their school bags on their backs .</blockquote><p> So people there greatly affected by the doctor who lived with them for two years 2002- 2003 . At that time , People in this village started to buy satellites which was forbidden and they started to use technology and see the world inside their homes.</p><p><img src="http://pixabay.com/get/b084a9b1131ffb76a9da/1432159599/vulture-708783_1280.jpg"></p><p><br></p></p>
              </div>
            </div>
          </div>
        </div>

我无权访问 <div class="col-md-12 wordwrap"> 中的内容

我只能访问这些 div。

    <div id="micropost-208">

      <div class ="jumbotron" style="background-color: #FFF; max-width: 100%; background-repeat:no-repeat;background-size:cover;background-position:center;border-top-left-radius:0px;border-top-right-radius:0px;">

        <div class="row paddingleft paddingright" style="padding-left:0;padding-right:0">

          <div class="col-md-12 wordwrap">

我试过设置 max-width="100%"风格和img-responsive对上述所有 div 进行分类，它对 img 标签没有影响。

Answer 1

使用 Twitter Boottrap 你可以给类 img-responsive 请引用 http://getbootstrap.com/css/#images

<img src="image.jpg" class="img-responsive" />

或者你也可以用 CSS max-width: 100%;

<img src="image.jpg" style="max-width: 100%;" />

或者在你的样式表中(评论中无用代码的建议)

img {
    max-width: 100%;
}

如果您不定义高度，它将保持纵横比。

使用 jQuery

$(function () {
    $('img').addClass('img-responsive');
});  

这将为所有图像添加 img-responsive 类