CSS image
This chapter will show you how to use CSS layout image.
Fillet Photos
Thumbnails
We use the border
property to create thumbnails.
Examples
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
<Img src = "paris.jpg" alt = "Paris">
try it"
Examples
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a: hover {
box-shadow: 0 0 2px 1px rgba
(0, 140, 186, 0.5);
}
<A href = "paris.jpg">
<Img src = "paris.jpg" alt = "Paris">
</ A>
try it"
Responsive image
Responsive image will automatically fit a variety of screen sizes.
Example, you can reset your browser to see the effect size:
If you need the freedom to scale the image, and the image to enlarge the size of not greater than the maximum value of the original, you can use the following code:
Tip: Web content can be more responsive design reference CSS responsive design tutorials .
Picture Text
How to locate the image text:
Examples
try it:
The top left corner >> the upper right corner » lower left corner» bottom right corner >> center >>Card-image
Examples
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba (0, 0, 0, 0.2), 0 6px 20px 0 rgba (0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
try it"
Image Filters
The CSS filter
attribute to add elements with visual effects (for example: Fuzzy and saturation).
Note: Internet Explorer, or Safari 5.1 (and earlier) does not support this property.
Examples
Edit all colors to black and white pictures (100% gray):
-webkit-filter: grayscale (100% ); / * Chrome, Safari, Opera * /
filter: grayscale (100%);
}
try it"
Tip: Visit the CSS filter Reference Manual for more content.
Responsive Image Gallery
Examples
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width : 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width : 500px) {
.responsive {
width: 100%;
}
}
try it"
Pictures Modal (modal)
This example demonstrates how to combine together CSS and JavaScript to render the image.
First, we use CSS to create a modal window (dialog), is hidden by default.
We then use JavaScript to display a modal window when we click, the picture will be displayed in a pop-up window:
Examples
var modal = document.getElementById ( 'myModal' );
// Get the picture frame mode, alt image attributes as described in the present Chinese pop
var img = document.getElementById ( 'myImg' );
var modalImg = document.getElementById ( "img01" );
var captionText = document.getElementById ( "caption" );
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName ( "close" ) [0];
// When the user clicks on <span > (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
try it"