图像位置相当于背景位置 [英] Image position equivalent to background position

问题描述

我正在一个网站上工作，我想要设置一个图像样式，就像你用background-position：center设置背景样式。对于普通图像，是否有相同的效果？

I am working on a website and I want to style an image like you style a background with background-position: center. Is there an equivalent to this for a regular image?

提前致谢，

Luuk

编辑：

图片响应并包含在容器中。

The image is responsive and contained in a container.

CSS：

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

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

推荐答案

我会做这样的事情将图像置于中心位置。

I would do something like this to position the image centered.

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

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

这篇关于图像位置相当于背景位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！