📜  使用 CSS 按比例调整图像大小

📅  最后修改于: 2021-10-31 05:14:12             🧑  作者: Mango

resize image 属性用于响应式 Web,其中图像会自动调整大小以适合 div 容器。 CSS 中的 max-width 属性用于创建调整图像大小的属性。如果 HTML 中定义了图像的宽度和高度,则 resize 属性将不起作用。

句法:

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

如果需要,也可以使用 Width 代替 max-width。关键是使用 height:auto 覆盖图像上已经存在的任何 height=”…” 属性。
CSS 属性 max-width 和 max-height 效果很好,但很多浏览器都不支持。

示例 1:


 
     
        cell padding 
         
     
     
        
            

            

        
     

输出:

一个常见的用法是设置 max-width: 100%;高度:自动;所以大图像不会超过它们的容器宽度。另一种方法是使用 object-fit 属性,这将适合图像,而不会改变比例。

示例 2:


 
     
        cell padding 
         
     
     
        
                

            

        
                          

输出:

HTML 是网页的基础,用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。

CSS 是网页的基础,用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。