Html 不同大小的 Twitter Bootstrap 响应式图像不成比例地调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19669281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap responsive images with different sizes resizing unproportionaly
提问by Mariana Hernandez
I'm new using the img-responsive class on bootstrap, i have the following page:
我是在引导程序上使用 img-responsive 类的新手，我有以下页面：
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.
我希望图像以相同的比例显示在那里，例如右侧的图像。我添加了这个 CSS 并将类应用于图像，但是当我调整窗口大小时，响应式调整大小不成比例。
.imageClip{
width:350px;
height:255px;
overflow:hidden;
}
Example of resizing WITH the CSS added:
添加 CSS 调整大小的示例：
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
我想知道是否有一种方法可以在不按比例调整大小的情况下做到这一点。谢谢
采纳答案by Thomas Ayoub
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)
它将保持比例并响应。（我把 30% 设为默认值，请随意调整）
回答by Gavin
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.
除非您的图像比例适合 350x255，否则它们将不成比例。您需要设置宽度或高度并将相对轴设置为自动。这将允许浏览器按比例调整图像大小。
.imageClip
{
width:350px;
height:auto;
overflow:hidden;
}
