css img

/* CSS代码示例：设置img标签的样式 */

/* 基本样式 */
img {
    width: 100%; /* 设置图片宽度为容器的100% */
    height: auto; /* 保持图片的宽高比 */
    border: 2px solid #ddd; /* 添加边框 */
    border-radius: 4px; /* 圆角边框 */
    display: block; /* 防止图片下方出现空白间隙 */
    margin: 0 auto; /* 居中显示 */
}

/* 鼠标悬停效果 */
img:hover {
    opacity: 0.7; /* 鼠标悬停时图片透明度变为70% */
    transform: scale(1.1); /* 放大图片 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 负责处理图片加载失败的情况 */
img.error {
    display: none; /* 如果图片加载失败，隐藏图片 */
}

解释说明：

1. 基本样式：

   • width: 100%; 和 height: auto; 确保图片会根据容器大小自适应，并且保持原始宽高比。
   • border 和 border-radius 用于给图片添加边框和圆角效果。
   • display: block; 和 margin: 0 auto; 使图片在容器中水平居中显示，并避免底部出现默认的空白间隙。

2. 鼠标悬停效果：

   • opacity: 0.7; 和 transform: scale(1.1); 在用户将鼠标悬停在图片上时，调整图片的透明度并放大图片。
   • transition: all 0.3s ease; 使这些变化平滑过渡，而不是立即生效。

3. 处理图片加载失败：

   • img.error 类用于处理图片加载失败的情况。通过设置 display: none;，可以让加载失败的图片不显示。