CODEWITHSUNDEEP
csstwitter-bootstrap
user3065197
user3065197

Reputation: 33

adjusting height in bootstrap css image

This is my css which handles image on my page:

Sample CODEPEN

.img-responsive {
    display: block;
    max-width: 10%;
    height:400px important!;
    margin-left: 33%;
    margin-top: 7%;
    height: auto;
}

As I increase or decrease width, it reflects well. but changing width does not make any effect.

How can I manually increase or decrease the image width here? css code is in index.php itself as inline css.

I want increasing the width must not increase the height of image

Upvotes: 1

Views: 9754

Answers (1)

sredmond
sredmond

Reputation: 460

If I'm not mistaken, I want increasing the width must not increase the height of image means that you want a way to change the width of an image, while keeping the height constant. If you're happy with doing this through CSS, you can wrap the image in an encapsulating div, control the div's size, and then tell the image to completely fill up the div.

The code boils down to:

<head>
    <style>
        .img-responsive {
           height:100%;
           width:100%;
        }

      .image-container
      {
        width:250px;
        height:140px;
      }
    </style>
</head>
<body>
    <div class="container image-container">
      <img src="http://www.menucool.com/slider/prod/image-slider-4.jpg" class="img-responsive" />
    </div>
</body>

If you change the width or height attributes of the image-container class, you'll see that the image stretches correspondingly.

Upvotes: 6

Related Questions