This chapter will introduce how to use CSS to layout images.

Rounded corner picture

Example

    php中文网(php.cn)  

  
圆角图片
 
使用 border-radius 属性来创建圆角图片:
 Paris

Example

Oval picture:

    php中文网(php.cn)  

  
椭圆形图片
 
使用 border-radius 属性来创建椭圆形图片：
 Paris


Thumbnails

We use theborderattribute to create thumbnails.

Instance

img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } Paris

Instance

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); }  Paris

Responsive images

Responsive images will automatically adapt to screens of various sizes.

In the example, you can check the effect by resetting the browser size:

Norway

If you need to freely scale the image, and the enlarged size of the image is not larger than its size For the original maximum value, you can use the following code:

Instance

img { max-width: 100%; height: auto; }

Picture text

How to position Image text:

Example

Norway
Lower left corner
Upper left corner
Upper right corner
Lower right corner
Centered

Card style 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; }

Image Filter

CSSfilterAttributes are used to add visual effects (such as blur and saturation) to elements.

Note:This attribute is not supported by Internet Exploreror 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%); }

Responsive picture 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 (modal)

This example demonstrates how to combine CSS and JavaScript to render images together.

First, we use CSS to create a modal window (dialog box), which is hidden by default.

Then, we use JavaScript to display the modal window. When we click on the image, the image will be displayed in the pop-up window:

Example

// Get modal window
var modal = document.getElementById('myModal'); // 获取图片模态框，alt 属性作为图片弹出中文本描述 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  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"; }