Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.