CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Retros
Retros

Reputation: 3621

Bootstrap 4 responsive image with set height

If I have a card inside a column, that needs to have an image with a set height, how do I make it not stretched out, as it currently is in my code example? And without having to have a set width on the image because I want it to be replaceable.

What am I missing and/or doing wrong? Thanks!

.card-block {
  padding: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="col-md-6">
  <div class="card">
    <img class="card-img-top" src="https://placeimg.com/640/480/animals" alt="Card image cap" height="200">
    <div class="card-block text-center">
      <p class="card-text">Text goes here</p>
      <p class="card-subtitle">More text goes here</p>
    </div>
  </div>
</div>

Upvotes: 0

Views: 17834

Answers (3)

Nikola Seke
Nikola Seke

Reputation: 122

Usually, when using Bootstrap you should use div with the class of container or container-fluid and after that div with the class of row. This worked for me 

<div class="container">
 <div class="row">
  <div class="col-md-6">
   <div class="card">
   <img class="card-img-top" src="https://placeimg.com/640/480/animals" 
    alt="Card image cap" height="200">
   <div class="card-body text-center">
    <p class="card-text">Text goes here</p>
    <p class="card-subtitle">More text goes here</p>
    </div>
   </div>
  </div>
 </div>
</div>

Cards know to be pain in the.. But I hope this helps.

Upvotes: 0

WebDevBooster
WebDevBooster

Reputation: 14964

Making an image responsive in Bootstrap 4 is very easy:

You just add the img-fluid class to the image.

HOWEVER... responsiveness comes at a cost and that is: You cannot set a minimum height for a responsive image (because that in itself would make the image non-responsive).

Luckily, there are a few workarounds for managing the size of your card image while still keeping it responsive. You can do that by manipulating the horizontal padding (use the px-* class and swap the * for a number between 0 and 5) as well as increasing or decreasing the column width.

Take a look at the 3 examples here: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row mt-3">
        <div class="col-md-6">
            <div class="card">
                <img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
                <div class="card-block text-center">
                    <p class="card-text">Text goes here</p>
                    <p class="card-subtitle">More text goes here</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-md-6 px-5">
            <div class="card">
                <img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
                <div class="card-block text-center">
                    <p class="card-text">Column with px-5 class</p>
                    <p class="card-subtitle">to make the image smaller</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-5 px-5">
            <div class="card">
                <img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
                <div class="card-block text-center">
                    <p class="card-text">Smaller column AND px-5 class</p>
                    <p class="card-subtitle">to make the image even smaller!</p>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Smokey Dawson
Smokey Dawson

Reputation: 9240

Your best solution is to instead of placing the image directly onto the page you can create an empty div and then set the background image to be https://placeimg.com/640/480/animals then set its size to cover and then it will cover the height and width of the div you have specified

so for example...

css

 card-image-container{
     background: url('https://placeimg.com/640/480/animals') 50% no-repeat;
     background-size: cover;
 }

Upvotes: 0

Related Questions