Control image size using bootstrap, css and angularjs

Question

I am a bit new to web development and am unable to figure out how to limit the size of an image.

I am trying to create a card using bootstrap, I am using bootstrap row class and dividing my card into 2 parts (col-md-3 and col-md-6) - one for image and other for data and I have an image of unknown specifications. What I expect is that the image should take up the entire space available in col-md-3 (height is constant 200px) and in sm and xs size it should take up the entire row. I have no problems if the image stretches.

Here is the code snippet. https://jsfiddle.net/nLndf1rm/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<ul>
  <li>
    <div class="card" style="background-color: grey; float: left; margin: 15px">
      <div class="row">
        <div class="col-md-3">
          <img style="width: 100%; width: 250px; height: 180px ;display: block; float: left" src="https://static01.nyt.com/images/2016/12/15/world/15echevarria-obit/15echevarria-obit-articleLarge.jpg" alt="Card image cap">
        </div>
        <div class="col-md-9">
          <h6>A
                        Bishop Javier Echevarría, Leader of Opus Dei, Dies at 84
                    </h6>
          <div>
            <p style="color: black;">
              Bishop Echevarría was the prelate of Opus Dei, the disciplined and influential global Roman Catholic organization, since 1994.....
              <br/>
            </p>
          </div>

        </div>
      </div>
    </div>
  </li>
</ul>

Please help me. I don't mind re-writing the entire code for this.

Answer 1

remove this from your image style : float:left;width:250px;

updated css for your image will be

img{
  width: 100%;
  height: 180px ;
  display:block;
 }

Answer 2

maybe you just need

.col-md-3 img{
  max-width: 100%;
  width: 100%;
  height: 200px;
}

and make sure you remove internal css for img

.col-md-3 img{
  max-width: 100%;
  width: 100%;
  height: 200px;
}

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<ul>
    <li>
        <div class = "card" style = "background-color: grey; float: left; margin: 15px">
            <div class = "row">
                <div class = "col-md-3" >
                    <img src = "http://static01.nyt.com/images/2016/12/15/world/15echevarria-obit/15echevarria-obit-articleLarge.jpg"
                         alt = "Card image cap">
                </div>
                <div class = " col-sm-9 col-md-9">
                    <h6>A
                        Bishop Javier Echevarría, Leader of Opus Dei, Dies at 84
                    </h6>
                    <div>
                        <p style = "color: black;">
                            Bishop Echevarría was the prelate of Opus Dei, the disciplined and influential global Roman Catholic organization, since 1994.....
                            <br/>
                        </p>
                    </div>
                    
                </div>
            </div>
        </div>
    </li>
</ul>

Answer 3

      <img style="width: 100%; display: block; float: left" src="https://static01.nyt.com/images/2016/12/15/world/15echevarria-obit/15echevarria-obit-articleLarge.jpg" alt="Card image cap">

Just remove the width and height keep only width 100% in img tag. Hope this will work

Answer 4

Why are you stretching your image when you can fill it, Simply use below code,

 .col-md-3 img{
    max-width: 100%;
    width : 100%
  }
 .col-md-3 {
    height :200px;
    overflow: hidden;
  }

Also please remove your inline css from img tag. It will work for you, Best of luck :)

Answer 5

You are using bootstrap framework so I just Add container before row. I dont know why you're using list element. Anyways just set the image style like I do below maybe this way get your answer. by default bootstrap already have a img-responsive class for img tag. Good luck and try to avoid inline css And I also remove the div you set for p element

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<ul style="padding:0;">
  <li style="list-style:none;">
    <div class="card" style="background-color: grey;">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-3 col-xs-12 " style="padding:0;">
            <img style="width:100%; margin:0 auto; display:block; height:auto;" src="http://static01.nyt.com/images/2016/12/15/world/15echevarria-obit/15echevarria-obit-articleLarge.jpg" alt="Card image cap">
          </div>
          <div class=" col-xs-12 col-md-9">
            <h6>A
                        Bishop Javier Echevarría, Leader of Opus Dei, Dies at 84
                    </h6>

            <p style="color: black;">
              Bishop Echevarría was the prelate of Opus Dei, the disciplined and influential global Roman Catholic organization, since 1994.....
              <br>
            </p>

          </div>
        </div>
      </div>

    </div>
  </li>
</ul>