缩放图像以最大限度地适应可用空间并使其居中

Question

我正在构建一个单页面应用程序.在其中一个视图中,我想显示一个必须占用尽可能多的可用空间的图像:

• 最重要的是:它必须保持纵横比
• 它不能被裁剪
• 它必须水平和/或垂直拉伸(不改变纵横比)以覆盖最大可能空间
• 图像和视口的大小未知
• 它必须居中
• 不能使用js
• 元素必须是img元素,不能使用背景 - 我已经有了背景(在容器中)

例如,假设图像是100px x 100px,我们有一个500px x 300px的容器.然后将图像拉伸至300px x 300px,并水平居中,以便在两侧留下100px作为填充.

这可能吗？

这是我想要完成的未完成的代码.

.container1 {
  width: 500px;
  height: 300px;
  border: 2px;
  border-color: red;
  border-style: solid;
}
.container2 {
  width: 300px;
  height: 500px;
  border: 2px;
  border-color: blue;
  border-style: solid
}
.fill-vertical {
  border: 2px;
  border-style: solid;
  border-color: green;
  display: block;
  max-width: 100%;
}
.fill-horizontal {
  width: 100%;
  border: 2px;
  border-style: solid;
  border-color: green;
}

 <h1>Container 1, 500px x 300px, not filled</h1>
<div class="container1">
  <img src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 1, filled vertically (should be horizontally centered)</h1>

<div class="container1">
  <img class="fill-vertical" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>

<h1>Container 300px x 500px, not filled</h1>

<div class="container2">
  <img class="fillIt" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>

<h1>Container 300px x 500px, filled horizontally, should be vertically centered</h1>

<div class="container2">
  <img class="fill-horizontal" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>

在该代码中,我被迫为图像使用不同的类,这取决于我是想垂直拉伸还是水平拉伸,但实际上我希望CSS自动执行此操作:只需定义一个拉伸类.

简而言之,我想让CSS做的是:拉伸宽度和/或高度以适应可用空间,保持纵横比

Answer 1

这可以通过CSS进行一些更改来实现

所需的更改是:

• 创建一个新的.centerImageCSS规则.overflow: hidden;确保图像不会溢出容器.position: relative;由于孩子img需要绝对相对于容器定位,因此是必需的.
• 创建一个新的.centerImage imgCSS规则.max-height: 100%;并max-width: 100%确保纵横比保持不变.设置bottom,left,right并top以0和margin: auto;图像居中.
• 将centerImage类添加到包含divs.
• 更改.fill-vertical到height: 100%;这将使得img填充的垂直空间.
• 更改.fill-horizontal到width: 100%;这将使得img填充的水平空间.

.container1 {
	border: 2px;
	border-color: red;
	border-style: solid;
	height: 300px;
	width: 500px;
}
.container2 {
	border: 2px;
	border-color: blue;
	border-style: solid;
	height: 500px;
	width: 300px;
}
.fill-vertical {
	height: 100%;
}
.fill-horizontal {
	width: 100%;
}
.centerImage {
	display: block;
	overflow: hidden;
	position: relative;
	text-align: center;
}
.centerImage img {
	bottom: 0;
	left: 0;
	margin: auto;
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	right: 0;
	top: 0;
}

<h1>Container 1, 500px x 300px, not filled</h1>
<div class="container1 centerImage">
	<img src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 1, filled vertically (should be horizontally centered)</h1>
<div class="container1 centerImage">
	<img class="fill-vertical" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 300px x 500px, not filled</h1>
<div class="container2 centerImage">
	<img src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>
<h1>Container 300px x 500px, filled horizontally, should be vertically centered</h1>
<div class="container2 centerImage">
	<img class="fill-horizontal" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0">
</div>

http://jsbin.com/bupuwohica/2/

除了上述更改之外,还可以使用CSS属性实现此目的 object-fit

要做到这一点,你需要:

• 添加object-fit: contain;到图像
• 设置height和width对100%

唯一需要注意的是浏览器支持,因为虽然Firefox,Chrome,Safari和Opera已经支持IE,但是IE和Edge不支持这种情况,并且需要填充或回退.

.container {
  border: 2px solid red;
  height: 200px;
  overflow: hidden;
  resize: both;
  width: 300px;
}
img {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

<p>The below div is resizable, drag the bottom right corner to see how the image scales</p>
<div class="container">
  <img alt="" src="http://files.giercownia.pl/upload/avatars/r/ravax.png?v=0" />
</div>

https://jsfiddle.net/efyey801/

Answer 2

这是一种方法，依靠background-size. 这确实根据img需要使用标签，但可见图形作为背景加载以利用可用的 CSS 规则。

.container {
  background-color: #edc;
  position: relative;
  margin: 2em;
}

.container img {
  display: block;
  width: 100%;
  height: 100%;

  background-image: url(http://www.clipartbest.com/cliparts/yck/eXb/yckeXboMi.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#c1 {
  width: 400px;
  height: 100px;
}


#c2 {
  width: 400px;
  height: 600px;
}

<div id="c1" class="container">
  <img src="">
</div>

<div id="c2" class="container">
  <img src="">
</div>

以下是有关背景大小的更多信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/background-size