图片如果较小则拉伸，如果较大则收缩，并且居中显示。

22 浏览
0 Comments

图片如果较小则拉伸，如果较大则收缩，并且居中显示。

我有一个高度固定、宽度可变且溢出隐藏的div：

.img-container {
  height: 400px;
  width: 50%;
  overflow: hidden;
}

还有尺寸大小不一的图片：比容器小、更宽或更高。

我需要的是：

  • 在需要时拉伸图片（垂直或水平）以填充容器
  • 拉伸时保持宽高比
  • 在图片较大时（溢出隐藏）将其居中（垂直和水平方向）

我在这里创建了一些示例：https://jsfiddle.net/sh6f5nfh/

.img-container {
  height: 200px;
  width: 50%;
  overflow: hidden;
  background: yellow;
  margin-bottom: 5px;
}

编辑：

这个解决方案解决了图片比容器更宽的问题：https://stackoverflow.com/a/3302072/740394。但还有一些情况没有回答到这个问题：（例如：更小的图像；宽度相同但较短；更高的图像；...）

0

3 答案

0 Comments

出现的原因：需要实现一个图片居中并且根据容器的大小，当图片较小时进行拉伸，当图片较大时进行缩小的效果。

解决方法：使用CSS样式来实现，通过设置容器的大小和位置，以及图片的大小和位置，通过transform属性来实现居中效果。

实现代码如下：

CSS样式：

.img-container{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.img-container img{
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);  
}

HTML代码：

可以在下面的链接中找到完整的示例：

https://jsfiddle.net/op4f8ad0/

0
0 Comments

问题原因：出现这个问题的原因是因为在不同的浏览器中，图片的显示方式不一致。有些浏览器会自动拉伸图片以填充容器，有些浏览器则会将图片缩小以适应容器。

解决方法：可以使用CSS的object-fit属性来解决这个问题。如果希望图片在容器中居中显示并保持原始比例，可以使用object-fit: contain;。如果希望图片填充整个容器并裁剪掉多余部分，可以使用object-fit: cover;。

对于不支持object-fit属性的浏览器（如IE11和Edge），可以使用Polyfill来实现相同的效果。Polyfill是一个用于补充不支持某些新特性的浏览器的脚本或插件。可以在GitHub上找到一个针对object-fit属性的Polyfill：Polyfill for CSS object-fit property。

以下是一个示例代码，其中包含了一个图片容器的样式和多个图片示例：

.img-container {
  height: 200px;
  width: 50%;
  overflow: hidden;
  background: yellow;
  margin-bottom: 5px;
}
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* or cover */
}

<div class='img-container'>
  <img src="http://placehold.it/350x150" />
</div>
<div class='img-container'>
  <img src="http://placehold.it/100x220" />
</div>
<div class='img-container'>
  <img src="http://placehold.it/70x50" />
</div>
<div class='img-container'>
  <img src="http://placehold.it/50x70" />
</div>

通过使用上述代码和解决方法，可以确保图片在不同浏览器中以所需方式进行拉伸或缩小，并居中显示在容器中。

0
0 Comments

在上述代码中，使用了两种不同的方法来处理背景图片的大小和位置问题。第一种方法是使用`.img-container`类，通过设置`background-size: contain`来确保背景图片按比例缩放，并保持其完整性。第二种方法是使用`.img-cover`类，通过设置`background-size: cover`来确保背景图片充满整个容器，并保持其比例。

问题的出现是因为在处理背景图片时，需要考虑图片的尺寸与容器的尺寸之间的关系。如果图片的尺寸较小，则需要拉伸图片使其填满容器；如果图片的尺寸较大，则需要缩小图片以适应容器。同时，为了使图片在容器中居中显示，还需要设置`background-position: center center`。

解决方法是使用CSS的`background-size`属性来控制背景图片的大小，通过设置`contain`或`cover`来达到目的。其中，`contain`会按比例缩放图片，使其完整地显示在容器内部；`cover`会拉伸或缩小图片，使其充满整个容器。通过设置`background-position: center center`来使图片在容器中居中显示。

通过以上的方法，可以实现背景图片的自适应大小和居中显示，无论图片的尺寸与容器的尺寸如何。这样可以保证网页在不同设备上的显示效果一致，并提升用户体验。

更多关于`background-size`属性的信息可以参考http://www.w3schools.com/cssref/css3_pr_background-size.asp。

0