css 图片查看器 |css继承原则

实现图片查看器的关键是CSS代码。开发者可以使用CSS中的伪元素和transform属性来实现图片的预览、放大和旋转功能。以下是一个简单的CSS代码示例，用于实现一个基本的图片查看器：

/* 预览图 */
.preview {
position: relative;
width: 150px;
height: 150px;
overflow: hidden;
margin-bottom: 10px;
}
.preview img {
display: block;
width: 100%;
height: auto;
transform-origin: center center;
transition: transform .3s ease-in-out;
}
/* 鼠标悬停效果 */
.preview:hover img {
transform: scale(1.2);
}
/* 点击放大 */
.preview:active img {
transform: scale(2);
}
/* 图片放大后的样式 */
.preview img:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1;
opacity: 0;
}
.preview img:hover:after {
opacity: 1;
}
/* 图片旋转 */
.preview img:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
background-image: url('rotate.png');
background-repeat: no-repeat;
background-size: 100%;
z-index: 1;
opacity: 0;
transition: opacity .3s ease-in-out;
}
.preview img:hover:before {
opacity: 1;
}
.preview img:active:before {
transform: rotate(90deg);
}

在该代码中，预览图的CSS样式使用了position、overflow等属性来实现尺寸和边距的布局。图片的过渡效果和变形使用了transition和transform属性。

总的来说，使用CSS技术可以非常方便地实现图片查看器，并且能够提供不同的效果和交互方式，使用户能够更加舒适地浏览和查看图片。