引言

图片截取技巧

1. 使用clip-path属性

img {
  clip-path: polygon(50% 0%, 100% 50%, 0% 50%);
}

2. 利用mask属性

img {
  mask-image: linear-gradient(to bottom, transparent, black);
}

图片精准缩放技巧

1. 使用object-fit属性

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

2. 通过transform属性缩放图片

img {
  width: 50%; /* 缩放后的宽度为原图的50% */
  height: auto; /* 高度自动调整以保持宽高比 */
  transform: scale(0.5); /* 缩放因子为0.5 */
}

实际应用案例

<div class="image-container">
  <img src="image1.jpg" alt="Image 1" class="responsive-image">
  <img src="image2.jpg" alt="Image 2" class="responsive-image">
  <!-- 更多图片 -->
</div>

<style>
.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.responsive-image {
  width: 100%; /* 图片宽度为容器宽度 */
  height: auto; /* 高度自动调整 */
  object-fit: cover; /* 保持宽高比，覆盖容器 */
}
</style>

总结