html - 当两个图像并排放置时，第二个图像比 Bootstrap 中的网页多

Question

Image for the problem我不知道为什么第二张图片占用的屏幕比 8 个部分多，但不适合这 8 个部分...因此我需要向右滚动...

这是我的 html 代码:

<div class="row">

      <div class="col-sm-3" >

        <img src="../img/1stimg.jpg" >
      </div>
      <div class="col-sm-9">

          <img src="../img/2ndimg.jpg" >

     </div>

    </div>

这是我的CSS代码:

body{
font-family: 'Abhaya Libre', serif;
}

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

.row img {
     max-width:100%;
     height:auto
}


.row { margin-left:0;margin-right:0;}

Answer 1

使用 Bootstrap 中的这个助手并删除 .row img:

<img src="..." class="img-responsive">

您的图片现在可以响应了。