分类导航

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 缩放图像以最大限度地适应可用空间并使其居中，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

这可能吗？

这是我想要完成的未完成的code .

.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做的是：拉伸宽度和/或高度以适应可用空间,保持纵横比

解决方法

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

所需的更改是：

>创建一个新的.centerImage css规则.溢出：隐藏;确保图像不会溢出容器.位置：相对;因为子img需要绝对相对于容器定位,所以是必需的.
>创建一个新的.centerImage img css规则.最大高度：100％;和最大宽度：100％确保纵横比保持不变.将bottom,left,right和top设置为0,margin：auto;使图像居中.
>将centerImage类添加到包含div.
>将.fill-vertical更改为高度：100％;这将使img填充垂直空间.
>将.fill-horizontal改为宽度：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,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,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来实现此目的

要做到这一点,你需要：

>添加对象：包含;到图像
>将高度和宽度设置为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/