使所有图像大小相同 [英] Make all images to be of the same size

问题描述

在我实施我的想法，我试图把很多（玩具示例：4）图像在Bootstrap的旋转木马的一个幻灯片。但是，我在调整大小时失败了，所以所有的图像在尺寸上有相同的特征，而不管它们的原始特征。

这里是 jsFiddle 我在幻灯片1中显示的问题，这里只是我做了很多尝试之一：

  img.resize {
 width：256px; 
 height：256px; 
} 
  

你看，我想要的图片都有相同的尺寸可视化目的。如何做呢？

换句话说，我想要的是每个图像都是相同的 width x height 尺寸。像我们把它们通过一个神经层，将修剪尺寸，使它们同质，像所有的人都放在同一个盒子！理想的情况是获得类似于搜索引擎给你（其中所有的高度都相同，宽度可能有所不同，

解决方案

现在，黑色比黄色短。 / div>

使用 max-width 并设置 .item 类的高度...和 overflow：hidden ：

小提琴

1张幻灯片中的4张图片：小提琴。请注意，只是直接的图像，你将不能使他们相同的大小。好吧，除非你想要他们挤压和挤压看起来可怕。

如果您希望所有4张图片都以相同的大小显示， 则需要额外的标记，例如包装图片标记的div。这是像谷歌图像的东西它....它们将图像标签包装在一个div，然后隐藏该div的任何溢出。

您不能调整大小4图像在当前标记在这些幻灯片中的单个一个完全相同的大小。图片本身无法裁剪或隐藏部分。

On my way on implemented my idea, I am trying to put a lot (toy example: 4) images in one slide of the carousel of Bootstrap. However, I am failing big time on resizing them so that all the images have same characteristics in dimensions, regardless of their original ones.

Here is the jsFiddle where I display the issue in slide 1, and here is just one of the many attempts I made:

img.resize{
    width:256px;
    height: 256px;
}

You see, I would like the images to all have the same dimensions, for visualization purposes. How to do that?

In other words, what I want is every image to be of the same width x height dimensions. Like we were passing them through a neural layer that would trim the dimensions to make them homogenous, like all of them were placed on the same box! The ideal thing would be to get something like what the search engines give you (where the height is the same for all, and the width might differ a bit, but w.r.t. to visualization that doesn't cause any harm).

Now, the black is shorter than the yellow.

解决方案

use max-width and set the .item class's height... and overflow: hidden:

Fiddle

4 images in 1 slide: Fiddle. Be aware that with just straight images you won't be able to make them the same size. Well, unless you want them squished and squeezed to look horrible.

If you want all 4 images to appear to be the same size, you need additional markup, such as a div wrapping the image tags. This is how things like Google images does it.... they wrap the image tag in a div, then hide any overflow of that div.

You can't resize 4 images in that current markup to be exactly the same size in a single one of those slides. Images themselves can't be cropped or have portions hidden. It's surrounding elements that cause images to appear cropped by hiding any overflow.

这篇关于使所有图像大小相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！