How to use CSS to lay out pictures
This article mainly introduces how to use CSS to layout pictures, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.
Rounded corner picture
Example
Fillet picture:
Img {
Border-radius: 8px
}
Example
Oval picture:
Img {
Border-radius: 50%
}
Give it a try »
Thumbnail image
We use the border property to create thumbnails.
Example
Img {
Border: 1px solid # ddd
Border-radius: 4px
Padding: 5px
}
Give it a try »
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
(01401860.5)
}
Responsive picture
Responsive pictures automatically adapt to screens of all sizes.
In the instance, 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
}
Give it a try »
Tip: Web responsive design can refer to the CSS responsive design tutorial for more information.
Picture text
How to locate the picture text:
Lower left corner upper right corner center
Try it:
Upper left »Top right »Lower left »Lower right »Center »
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
The CSS filter attribute is used to add visual effects to the element (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; / * 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%
}
}
Give it a try »
Picture Modal (mode)
This example demonstrates how to render a picture together with CSS and JavaScript.
First, we use CSS to create modal windows (dialogs), which are 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 the modal window
Var modal = document.getElementById ('myModal')
/ / get the picture mode box, and the alt attribute pops up the text description as the picture.
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 [XSS _ clean] = this.alt
}
/ / Get the element that closes the modal
Var span = document.getElementsByClassName ("close") [0]
/ / When the user clicks on (x), close the modal
Span.onclick = function () {
Modal.style.display = "none"
}
Thank you for reading this article carefully. I hope the article "how to use CSS to layout pictures" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
