CODEWITHSUNDEEP
cssresponsive-designframeworksimage-scaling
Sambulo Senda
Sambulo Senda

Reputation: 1418

Image is not responsive enough on bootstrap

I am using Bootstrap and I have a big image which is about 3000 x 2000 px. I want the image to be responsive when loaded on a style calling width of 300 and height of 300 px. How do I make my image responsive without messing up the image?

<li data-thumb-alt="" style="width: 350px: height : 300px; margin-right: 30px; float: left; display: block;">
    <div class="features">
        <img style="" class="img img-responsive" src="/Content/BusinessProfileImages/747f651f.jpg" alt="alternate text here" draggable="false">
        <div class="container_address">
            <a href="/Home/BusinessDetail?BusinessId=436&amp;AppointmentID=0">
        </div>
    </div>
</li>

.features img {
    margin: 0 auto;
    width: 100%;
    padding-buttom: 3px;
    margin-top: 1px;
    float:left;
}

Upvotes: 0

Views: 96

Answers (1)

Chris
Chris

Reputation: 129

An 'img' tag is meant to display the entire image, so it will do what it can to change the aspect ratio to fit your bounds. If you need to have an image responsive without being its original aspect ratio an option is to use it as a background image inside of a container. An issue with this method is that since you are not keeping the original aspect ratio you will have some issues with cutting off the edges of the image.

Here are some helpful links on background-size and background-position, using a mix of these can let you zoom in on the center of a background image to keep the size responsive without distorting the aspect ratio.

Upvotes: 1

Related Questions