图像位置相当于背景位置

Question

我正在开发一个网站，我想设计一个图像，就像您使用背景位置：中心设计背景一样。普通图像是否有与此等效的图像？

提前致谢，

卢克

编辑：

图像具有响应性并包含在容器中。

CSS：

.img-container {
max-height: 300px;
overflow: hidden;
}

.img-container img {
max-height: 100%;
max-width: 100%;
}

Answer 1

我会做这样的事情来将图像居中。

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 300px;
  overflow: hidden;
}

.img-container img {
  max-height: 100%;
  max-width: 100%;
}

Answer 2

你可以选择display flex，但对IE的支持是相当灾难性的。如果您关心浏览器支持（您应该关心），请改为使用下面的示例。

<div class="list">
  <div class="item">
    <img src="https://unsplash.it/50/40" alt="">    
  </div>
  <div class="item">
    <img src="https://unsplash.it/50/60" alt="">
  </div>
  <div class="item">
    <img src="https://unsplash.it/50/30" alt="">
  </div>
  <div class="item">
    <img src="https://unsplash.it/50" alt="">
  </div>
</div>

萨斯：

.list {
  text-align: center;
}

.item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 5rem;
  width: 5rem;
  background: red;

  img {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
  }
}

确保也添加变换属性的前缀。

小提琴：https://jsfiddle.net/k433b6up/

Answer 3

您想要的结果并不完全清楚，但以下是两种不同解释的一些选项：

更改图像的显示属性并设置其容器的文本对齐方式将保持其原始高度和宽度，同时将其在容器中居中：

.img-container {
    max-height: 300px;
    overflow: hidden;
    text-align: center;
}

.img-container img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
}

演示：https://jsfiddle.net/5suo8tbw/

如果您尝试使用

img

元素实现背景填充，则应考虑使用

object-fit: cover

属性。这将始终填充容器的尺寸，保持图像的纵横比，并将其置于容器的中心。

.img-container {
    max-height: 300px;
    overflow: hidden;
}

.img-container img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

演示：https://jsfiddle.net/5suo8tbw/1/

这里是规范的链接：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

有关跨浏览器支持，请查看polyfill：https://github.com/anselmh/object-fit

Answer 4

object-fit

和

object-position

属性分别相当于具有

img

的块元素的

background-size

和

background-position

属性。在下面的代码片段中，请注意容器大小为

background-image

，而图像大小为

300px * 300px

。

500px * 300px

.imageContainer {
   margin: 15px;
   width: 300px;
   height: 300px;
   border: 5px solid lightgreen;
 }

.image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

Answer 5

<div class='imageContainer'>
  <img class='image'src='https://picsum.photos/500/300' alt='lorem picsum' />
<div>