CSS Picture
This section will show you how to use CSS to lay out pictures.
Rounded corner picture
Example
Fillet picture:
img{
border-radius:8px;
}
Example
Oval picture:
img{
border-radius:50%;
}
Thumbnail image
We use border property to create a thumbnail.
Example
img{
border:1px solid #ddd;
border-radius:4px;
padding:5px;
}
<img src="paris.jpg" alt="Paris">
Example
a{
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>
Responsive picture
Responsive pictures automatically adapt to screens of all sizes.
In the example, you can view the effect by resizing the browser:
If you need to zoom the picture freely and the size of the picture is not larger than its original maximum, you can use the following code:
Example
img{
max-width:100%;
height:auto;
}
Tip: Web responsive design can refer to the CSS responsive design tutorial for more information.
Picture text
How to locate the picture text:
Example
Lower left corner
Upper left corner
Upper right corner
Lower right corner
In the middle
Card picture
Example
div.polaroid{
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;
}
Picture filter
CSS filter attributes are used to add visual effects to elements (for example, blur and saturation).
Note: this attribute is not supported by Internet Explorer or Safari 5.1 (and earlier).
Example
Change the color of all pictures to black and white (100% grayscale):
img{
-webkit-filter:grayscale(100%); /\* Chrome, Safari, Opera \*/
filter:grayscale(100%);
}
Tip: visit the CSS filter reference manual for more information.
Responsive photo album
Example
.responsive{
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%;
}
}
Picture Modal (mode)
This example demonstrates how to render a picture together with CSS and JavaScript.
First, we use CSS to create the modal window (dialog box), which is hidden by default.
Then, we use JavaScript to display the modal window, and when we click on the picture, the picture will appear in the pop-up window:
Example
// Get Modal Window
var modal = document.getElementById('myModal');
// Get the image modal box and use the alt attribute as the text description in the image pop-up
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";
}