如何在不改变宽高比的情况下强制图像和视频适合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-response添加到所有图像

Answer 2

试试这个：

#micropost-208 .col-md-12 img {max-width: 100%;}