CSS images

CSS images

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

Rounded Corner Image

Thumbnail

我们使用 border 属性来创建缩略图。       
  
缩略图
 
我们使用 border 属性来创建缩略图。
   

Response Style pictures

Responsive pictures will automatically adapt to screens of various sizes.

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

     
  
响应式图片
 
响应式图片会自动适配各种尺寸的屏幕。
 
通过重置浏览器大小查看效果:
   

Card-style picture

      
  
响应式卡片
 
  
 
The Troll's tongue in Hardanger, Norway
 
 
 
  
 
Northern Lights in Norway
 
 
  

Responsive picture album

     
  
响应式图片相册
 
 
    
Add a description of the image here
 
 
 
 
    
Add a description of the image here
 
 
 
 
    
Add a description of the image here
 
 
 
 
    
Add a description of the image here
 
 
 
 
 
重置浏览器大小查看效果
 
  

Picture Modal(modal)

This example demonstrates how to combine CSS and JavaScript to render pictures 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