闲来无事，突然想起用ChatGPT写了一个关于以图片中心点为准自动缩放裁切居中显示的网页代码

我问它，我说要在网页上实现一个图片展示的效果，要求是我设定一个显示大小，比如宽300px，高150px，如果图片超过这个尺寸，以图片中心点为准自动缩放裁切居中显示，然后它直接给出了代码，并给出具体步骤：

1.在 HTML 中添加一个 div 元素，作为图片的容器：

<div class="image-container">
<img src="path/to/image.jpg">
</div>

				

					
				
				

					
				
				

					
				
				

					
				
			

2.在 CSS 中设置该 div 元素的宽度和高度，并设置 img 标签的宽度和高度为 100%：

.image-container {
  width: 300px;
  height: 150px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

				

					
				
				

					
				
				

					
				
				

					
				
			

其中，overflow: hidden 属性用于隐藏超出容器的部分，display: flex 和 justify-content: center、align-items: center 属性用于实现水平和垂直居中。

object-fit 属性用于设置图片的宽高比例，cover 值表示自动缩放裁切，保持图片比例不变，以完全覆盖容器；object-position 属性用于设置图片的位置，center 值表示居中显示。

这样，如果图片超过了容器的尺寸，就会自动缩放裁切并居中显示。如果图片尺寸小于容器尺寸，则会自动按比例放大填充整个容器。