isite
Version:
Create High Level Multi-Language Web Site [Fast and Easy]
98 lines (86 loc) • 1.76 kB
CSS
.image {
width: 400px;
height: 300px;
border-radius: 10px;
}
i-image {
display: block;
width: 90% ;
height: 90% ;
border: var(--i-image-border);
margin: 5px;
border-radius: 5px;
padding: 5px;
}
i-image div {
width: 100%;
height: 100%;
}
i-image button i {
width: 100%;
}
i-image.logo {
width: 48px ;
height: 48px ;
border-radius: 5px;
}
i-image img {
width: 100%;
height: 100%;
object-fit: fill;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
i-image i-button {
display: none;
}
i-image.full img {
width: 100% ;
height: 100% ;
padding: 5px;
}
i-image.img32 {
width: 32px ;
height: 32px ;
min-width: 32px ;
min-height: 32px ;
padding: 1px ;
}
i-image.img48 {
width: 48px ;
height: 48px ;
min-width: 48px ;
min-height: 48px ;
padding: 2px ;
}
i-image.img64 {
width: 64px ;
height: 64px ;
min-width: 64px ;
min-height: 64px ;
padding: 2px ;
}
i-image.img128 {
width: 128px ;
height: 128px ;
min-width: 128px ;
min-height: 128px ;
padding: 3px ;
}
i-image.img256 {
width: 256px ;
height: 256px ;
min-width: 256px ;
min-height: 256px ;
padding: 3px ;
}
i-image.hover img:hover {
transform: scale(1.1);
}
i-image[view] {
border: var(--i-image-view-border);
}
i-image[view] i-button {
display: none;
}