照片网格的 CSS 对象位置或类似属性答案

【问题标题】：CSS object-position or similar property for a photo grid照片网格的 CSS 对象位置或类似属性
【发布时间】：2020-02-04 14:14:34
【问题描述】：

希望得到一些意见。我一直在学习一些有关 Web 开发的在线课程，目前我一直在尝试将图像添加到 html 页面（3x3 图像网格）。

首先我使用了 transform 属性，因此我可以在将鼠标悬停在图像上并延迟 0.5 秒后，以 0.5 秒的过渡将图像缩放到大小的 1.5 倍。

左右两侧的图像存在问题，因为它们的一部分在缩放后会超出屏幕。

为了纠正这个问题，我首先尝试了position: relative; left: 6%;，但了解到位置不是您可以设置动画的属性，因此图像会立即移动位置，然后在 0.5 秒后缩放。

我的第二次尝试是使用 object-position: 90px; ，这个属性确实可以处理延迟，但是在它缩放之后，似乎图像的一大块被裁剪了。

我一直在尝试不同的属性，例如 transform-origin 哪种有效，但在缩放时给人一种毛刺的感觉，然后将图像移到一边失去流动性。

似乎无法找到关于对象位置的有用文档，说明为什么要裁剪部分图像，此属性提供了流畅的缩放和定位效果，但我遇到了裁剪问题。

这是我进行此练习的代码笔的链接：

https://codepen.io/superavd88/pen/PoqYoRJ

任何想法都将不胜感激，因为过去几天我一直在尝试解决此问题，但没有成功。

提前致谢。

【问题讨论】：

欢迎来到 SO！也许这可以帮助您将图像包装在一些 div stackoverflow.com/questions/26601961/… 这个链接问题是您所需要的

标签： html css image properties css-position

【解决方案1】：

欢迎来到 SO！

您只需将图像独立包装div 并使其溢出 hidden，我也改变了网格，现在使用flex

.thumbnail img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    width:100%;
}
.thumbnail .img-parent:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.img-parent{
    overflow:hidden;
    width: 33%;
}
img{
width: 100%}
.thumbnail {
    display: flex;
        flex-wrap: wrap;
}

<div class="thumbnail">
	     <div class="img-parent">
	        <img src="https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/HB4AT3D3IMI6TMPTWIZ74WAR54.jpg&w=767" alt="deep house cleaning">
             </div>
	     
	 
    <div class="img-parent">
	        <img src="https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/HB4AT3D3IMI6TMPTWIZ74WAR54.jpg&w=767" alt="deep house cleaning">
             </div>
	     
	
    <div class="img-parent">
	        <img src="https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/HB4AT3D3IMI6TMPTWIZ74WAR54.jpg&w=767" alt="deep house cleaning">
             </div>
	     
	
    <div class="img-parent">
	        <img src="https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/HB4AT3D3IMI6TMPTWIZ74WAR54.jpg&w=767" alt="deep house cleaning">
             </div>
	     
	   </div>

Reference 了解 scale 属性的工作原理

【讨论】：

【解决方案2】：

更改 CSS 样式

  img   {
    width: 30%;
    float: initial;
    margin: 1rem;
    transition: all .5s ease-in-out;
}

  .leftimg:hover{
      transform: scale(1.5);

  }

  .rightimg:hover{
      transform: scale(1.5);
  }

  .center:hover{
      transform: scale(1.5);
  }

【讨论】：