CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Mariana Hernandez
Mariana Hernandez

Reputation: 1969

Twitter Bootstrap responsive images with different sizes resizing unproportionaly

I'm new using the img-responsive class on bootstrap, i have the following page:

enter image description here I want the images to show there with the same proportions, for example like the images at the right. i added this CSS and apply the class to the image but when i resize the window the responsive resizing is not proportioned.

.imageClip{
    width:350px;
    height:255px;
    overflow:hidden;
}

Example of resizing WITH the CSS added:

enter image description here

This is my code:

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

      <img class="img-responsive imageClip" src="{$servicio.med_ruta}">

      <h3>{$servicio.ser_nombre}</h3>
      <p>{$servicio.ser_descripcion}</p>
      <a class="btn btn-link btn-sm pull-right">More <i class="icon-angle-right"></i></a>
 </div>

I would like to know if its a way to do this without the un proportioned resizing. Thank you

Upvotes: 6

Views: 24027

Answers (2)

Gavin
Gavin

Reputation: 2143

This is because you are forcing the images to fit a given ratio...

.imageClip
    {
    width:350px;
    height:255px;
    overflow:hidden;
    }

Unless your image is to a ratio that fits 350x255 then they will be out of proportion. You need to set EITHER the width OR height and set the opposite axis to auto. This will allow the browser to resize the image proportionately.

.imageClip
    {
    width:350px;
    height:auto;
    overflow:hidden;
    }

Upvotes: 0

Thomas Ayoub
Thomas Ayoub

Reputation: 29431

Try with :

.imageClip{
    width:30%;
    height: auto;
    overflow:hidden;
}

It will keep proportion and will be responsive. (I put 30% as default, feel free to adapt it)

Upvotes: 6

Related Questions