使图像以均匀的尺寸显示

时间：2014-09-19 07:05:25

标签： html css css3

在我的网站上，我有一个显示用户上传图片的图库。问题是，由于我们无法控制用户上传的图像的尺寸，因此不同的图像会出现在不同的维度enter image description here中。使用html使图像以统一大小显示的最佳方法是什么？还是最好在jquery / javascript中完成？

4 个答案:

答案 0 :(得分：2)

如果您不想在服务器端裁剪图像但仍希望获得某种程度的一致性，那么您可以使用CSS中的max-width和max-height属性以及一小段jQuery来执行此操作你的工作。这不会改变原始图像，但会将其移动到容器中，使其居中但填充框架。

然后，您需要确定所有缩略图的宽度和高度，它们将在中心对齐并最终均匀地溢出边界。

$(window).on("load", function() {
	
	orientateGalleryImages($("#contentGallery").children().children().children("img"));	
	
});

function orientateGalleryImages(images) {
	
	images.each(function() {
		
		var thisImage = jQuery(this);
		
		if(thisImage.height() > thisImage.width()) {
			
			thisImage.addClass("portrait");
			
		} else if(thisImage.width() > thisImage.height()) {

			thisImage.addClass("landscape");

		} else {
			
			thisImage.addClass("square");    			
		}    		
	});    	
}
.galleryArea {
	background: rgba(0,0,0,0.7);
	padding: 10px;
    overflow: hidden;
}
.galleryArea .imageWrapper {
	position: relative;
	width: 10%;
	padding-top: 10%;
	overflow: hidden;
    float: left;
}
.galleryArea .imagePosition {
	position: absolute;
	top: -50%;
	left: -50%; 
	width: 200%; 
	height: 200%;
}
.galleryArea .imagePosition img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.galleryArea .imagePosition img.landscape {
	max-height: 50%;
    height: 50%;
}
.galleryArea .imagePosition img.portrait {
	max-width: 50%;
    width: 50%;
}
.galleryArea .imagePosition img.square {
	max-width: 50%;
    max-height: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentGallery" class="galleryArea">
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x250">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/150x400">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x150">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/150x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x150">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/150x400">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x150">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/150x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/150x400">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x150">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/150x400">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x150">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x300">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/300x150">
		</div>
	</div>
	<div class="imageWrapper">
		<div class="imagePosition">
			<img src="http://placehold.it/150x300">
		</div>
	</div>
</div>

DEMO

HTML：

HTML有点长，但需要在父级内部偏移图像。

JS：

JavaScript会查看图像的最长边，并为其添加一个纵向，横向或正方形的类。这些类指定max-width，max-height或两者，具体取决于方向。

答案 1 :(得分：0)

解决这个问题的方法是在css中给它们固定的高度。 （例如img{ height:100px; }）

答案 2 :(得分：0)

执行此操作的一种方法是wrap＆＃39; div中的所有图片。

HTML：

<div class="img_parent">
    <img />
</div>

<div class="img_parent">
    <img />
</div>

CSS：

.img_parent{ width:100px; height:100px; overflow:hidden; display:inline-block;}
.img_parent img{ width:100%;}

答案 3 :(得分：0)

当用户上传图像时，使其自动将图像裁剪为特定尺寸，例如。 400px x 400px

下面的演示只是一个裁剪的想法，但您可以修改代码，使其自动裁剪为例如400px x 400px的大小

Croppic example

这只是一个想法。希望你说得对。

相关问题
最新问题