Реакційні знімки в Twitter Bootstrap із різними розмірами непропорційно змінюються - html, css, twitter-bootstrap, responsive-design

Я новачок у використанні класу img-responsive на початковому завантаженні, я маю наступну сторінку:

Я хочу, щоб зображення там показувалися з тим самимпропорції, наприклад, подібні зображенням праворуч. я додав цей CSS і застосувати клас до зображення, але коли я змінювати розмір вікна, відповідь зміна розміру не пропорційно.

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

Приклад зміни розміру з доданим CSS:

Це мій код:

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

<img class="img-responsive imageClip" src="/images/{$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>

Я хотів би знати, чи є це спосіб зробити це без зміни розміру. Дякую

Відповіді:

Спробуйте з:

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

Він буде підтримувати пропорції і буде реагувати. (Я встановлюю 30% як стандартний, не соромтеся його адаптувати)

Це тому, що ви змушуєте зображення відповідати заданому співвідношенню ...

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

Якщо зображення не дорівнює 350x255тоді вони будуть непропорційними. Потрібно встановити висоту АБО ширини АБО і встановити протилежну вісь на авто. Це дозволить браузеру пропорційно змінювати розмір зображення.

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