javascript - 如何强制图像显示给定的高度和宽度而不在 HTML DIV 标签中拉伸(stretch)？

Question

我需要一些帮助来使图像适合 DIV 标记内提供的高度和宽度，并且不应拉伸(stretch)。由于一些图像是横向的，一些是纵向的，我需要强制它们适应 DIV 或 IMG 标签。

<div class="frame" style="">
  <img id="photo" src="http://pocketlink.epocketlife.com/ImageRepository/images/events/ADEBAB1C-4FAF-4D65-A43D-A02978B76340/7adb104b-5140-45d9-a694-56cf5112917d.png">
</div>

This is one of the Examples I found, you may implement there.
http://jsbin.com/vikanovaya/edit?html,css,output

Answer 1

您将需要使用一些 CSS 位置技巧来实现您想要的效果，但希望这些示例之一能够满足您的要求。

示例 1 - 单张图片

在下面的示例中，当图像碰到容器的边缘时，图像会变大或变小。如果您水平或垂直调整示例的大小，它永远不会裁剪。 (例如，尝试全屏示例)。

需要:仅 CSS

---

body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI Light", "Helvetica Neue LT", "Helvetica Ultra LT", "Roboto", Arial, sans-serif;
}
.gallery {
  background: rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  overflow: hidden;
  z-index: 2;
}
.gallery .imageWrapper {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}
.gallery .imageWrapper img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

<div class="gallery isFullScreen">
  <div class="imageWrapper">
    <img src="http://via.placeholder.com/3500x1500" />
  </div>
</div>

示例 2 - 缩略图

在此示例中，有两个图像不符合其容器的纵横比。调整它们的大小，使其最长的边首先碰到 div，然后居中。现在，所有缩略图容器的大小都应该相同，不符合要求的图像会缩小以适合。

需要:仅 CSS

---

.galleryArea {
	background: rgba(0,0,0,0.7);
	padding: 10px;
    overflow: hidden;
}
.galleryArea .imageWrapper {
	position: relative;
    width: 100px;
    height: 100px;
    float: left;
    background: #fff;
}
.galleryArea .imagePosition {
	position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}
.galleryArea .imagePosition img {
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      margin: auto; 
      max-width: 100%;
      max-height: 100%;
}

<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/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/300x100" />
		</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>

示例 3 - 可拉伸(stretch)的缩略图

在此示例中，不符合其容器纵横比的两个图像现在被拉伸(stretch)，以便它们的最短边扩展以填充容器并且它们的最长边溢出。这使最终结果更整洁一些，但需要 JavaScript 来帮助完成。

需要:CSS 和 JavaScript (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;
    display: flex;
}
.galleryArea .imageWrapper {
	position: relative;
	width: 10%;
	padding-top: 10%;
	overflow: hidden;
}
.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%;
	left: -50%;
	margin-left: 25%;
}
.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/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/300x100" />
		</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>