This section will show you how to use CSS to lay out pictures. Example Fillet picture: Example Oval picture: We use Example Example 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 Tip: Web responsive design can refer to the CSS responsive design tutorial for more information. How to locate the picture text: Example Lower left corner Upper left corner Upper right corner Lower right corner In the middle Example CSS 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): Tip: visit the CSS filter reference manual for more information. Example This example demonstrates how to render a picture together with CSS and JavaScript. First, we use CSS to create the 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 8.16.1. Rounded corner picture ¶
img{
border-radius:8px;
}
img{
border-radius:50%;
}
8.16.2. Thumbnail image ¶
border
property to create a thumbnail.img{
border:1px solid #ddd;
border-radius:4px;
padding:5px;
}
<img src="paris.jpg" alt="Paris">
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>
8.16.3. Responsive picture ¶
img{
max-width:100%;
height:auto;
}
8.16.4. Picture text ¶
8.16.5. Card picture ¶
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;
}
8.16.6. Picture filter ¶
filter
attributes are used to add visual effects to elements (for example, blur and saturation).img{
-webkit-filter:grayscale(100%); /\* Chrome, Safari, Opera \*/
filter:grayscale(100%);
}
8.16.7. Responsive photo album ¶
.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%;
}
}
8.16.8. Picture Modal (mode) ¶
modal
window (dialog box), which is hidden by default.// 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";
}