我怎样才能通过CSS使所有不同的高度和宽度的图像相同？
我正试图创build一个由产品照片组成的图像墙。 不幸的是，他们都是不同的高度和宽度。 我如何使用CSS来使所有的图像看起来相同的大小？ 优选100×100。
我正在考虑做一个高度和宽度为100px的div，然后是如何填充它。 不知道如何做到这一点。
我怎样才能做到这一点？
.img { position: relative; float: left; width: 100px; height: 100px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; }
<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div> <div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div> <div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>
如果你歪曲你的图像太多，也就是说，把它们从比例中拿出来，它们可能看起来不正确， – less量是好的，但是一种方法是将图像放入“容器”中，并将容器设置为100 x 100，然后将图像设置为无溢出，并将最小宽度设置为容器的最大宽度，但这会裁剪一些图像，
例如
<h4>Products</h4> <ul class="products"> <li class="crop"> <img src="ipod.jpg" alt="iPod" /> </li> </ul> .crop { height: 300px; width: 400px; overflow: hidden; } .crop img { height: auto; width: 400px; }
这样图像将保持其容器的大小，但将resize而不会受到限制
对于那些使用Bootstrap而不想失去响应性的人来说，不要设置容器的宽度。 下面的代码是基于gillytech后。
index.hmtl
<div id="image_preview" class="row"> <div class='crop col-xs-12 col-sm-6 col-md-6 '> <img class="col-xs-12 col-sm-6 col-md-6" id="preview0" src='img/preview_default.jpg'/> </div> <div class="col-xs-12 col-sm-6 col-md-6"> more stuff </div> </div> <!-- end image preview -->
style.css文件
/*images with the same width*/ .crop { height: 300px; /*width: 400px;*/ overflow: hidden; } .crop img { height: auto; width: 100%; }
OR style.css
/*images with the same height*/ .crop { height: 300px; /*width: 400px;*/ overflow: hidden; } .crop img { height: 100%; width: auto; }
你可以这样做：
.container{ position: relative; width: 100px; height: 100px; overflow: hidden; z-index: 1; } img{ left: 50%; position: absolute; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; }
在CSS文件中设置高度和宽度参数
.ImageStyle{ max-height: 17vw; min-height: 17vw; max-width:17vw; min-width: 17vw; }
图像大小不取决于div的高度和宽度，
在CSS中使用img元素
这里是帮助你的CSS代码
div img{ width: 100px; height:100px; }
如果你想按div设置大小
用这个
div { width:100px; height:100px; overflow:hidden; }
通过此代码您的图像显示在原始大小，但显示第一个100x100px溢出将隐藏
没有代码，这是很难帮助你，但这里有一些实用的build议给你：
我怀疑你的“图像墙”有一些id或类的容器给它的风格。
例如：
<body> <div id="maincontainer"> <div id="header"></div> <div id="content"> <div id="imagewall"> <img src"img.jpg"> <!-- code continues -->
如果您的代码设置类似于上述内容，则为所有图像设置图像的大小，而不会影响其他图像（如徽标等）。
#imagewall img { width: 100px; height: 100px; }
但是，如果你的图像不是完全正方形的，他们将会使用这种方法倾斜。
转到您的CSS文件并按照以下方式调整所有图像的大小
img { width: 100px; height: 100px; }
我一直在寻找解决这个问题的方法，来创build一个标识列表。
我想出了这个使用了一些flexbox的解决scheme，因为我们不担心旧版浏览器，所以对我们很有用。
这个例子假设一个100x100px的框，但我敢肯定，大小可以灵活/响应。
.img__container { display: flex; padding: 15px 12px; box-sizing: border-box; width: 100px; height: 100px; img { margin: auto; max-width: 100%; max-height: 100%; } }
ps .:您可能需要添加一些前缀或使用autoprefixer。
根据安迪·威尔金森 （ Andi Wilkinson）的回答 （第二个答案 ），我稍微改进了一点，确保显示图像的中心（就像接受的答案一样）：
HTML：
<div class="crop"> <img src="img.png"> </div>
CSS：
.crop{ height: 150px; width: 200px; overflow: hidden; } .crop img{ width: 100%; height: auto; position: relative; top: 50%; -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(-50%); /* IE 9 */ transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */ }
最简单的方法 – 这将保持图像的大小，并用空间填充其他区域，这样所有的图像将采取相同的指定空间，无论图像的大小，没有拉伸
.img{ width:100px; height:100px; /*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/ object-fit:scale-down; }
