CSS images

CSS images

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

---

Rounded corner picture

      
  
圆角图片
   

Run the program and try it

---

Oval image:

      
  
椭圆形图片
   

Run the program to try it

---

Thumbnail

We use the border attribute to create thumbnails.

      
  
缩略图
   

Run the program to try it

---

We use the border property to create thumbnails. Add a link outside the image.

      
  
缩略图作为连接
 
我们使用 border 属性来创建缩略图。在图片外层添加一个链接。
 
点击图片查看效果：
     

Run the program and try it

---

Responsive pictures

Responsive pictures will automatically adapt Comes with screens of various sizes. If you need to freely scale the image, and the enlarged size of the image is not larger than its original maximum value, you can use the following code:

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

Run the program and try it

---

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

      
  
图片模态框
 
本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。
 首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。
 
然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：
   
 ×  
 
   

Run the program and try it