使用twitter启动缩略图设置overflow属性 [英] Setting overflow property with twitter bootstrap thumbnails

问题描述

我试图在固定尺寸的缩略图中显示不同高度和宽度的图片。为了实现这一点，我试图调整图像大小，而不影响长宽比，然后隐藏从缩略图高度和宽度溢出的图像部分。

I am trying to display images of varying height and width in thumbnails of fixed dimensions. To achieve this, i am attempting to resize the image without affecting the aspect ratio, and then hiding the parts of the image that overflows from the thumbnail height and width.

I试图在缩略图类上使用overflow：hiddencss属性，但是图片中仍然出现了图片溢出的部分。

I tried using "overflow:hidden" css property on the thumbnail class, but the supposedly overflowing parts of the pictures still appeared nevertheless.

这是一个我不喜欢的attemp以防止缩略图显示溢出
http://jsfiddle.net/smallfonts/ARn4N/

Here is a js fiddle of my dismal attemp to prevent the thumbnail from showing overflows http://jsfiddle.net/smallfonts/ARn4N/

我也遇到了一篇关于如何设置要隐藏在缩略图中的图像的溢出部分的文章的这个宝石。但是，我无法在twitter启动缩略图上创建相同的效果。

I have also come across this gem of an article about how to set overflowing parts of an image to be hidden in a thumbnail. However, i could not create the same effect on twitter bootstrap thumbnails.

http://cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property/

谢谢！

推荐答案

这是你需要的： http://jsfiddle.net/ARn4N/10/

这篇关于使用twitter启动缩略图设置overflow属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！