快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

css如何让图片不变形

小编给大家分享一下css如何让图片不变形,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

站在用户的角度思考问题,与客户深入沟通,找到桂阳网站设计与桂阳网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:做网站、网站制作、企业官网、英文网站、手机端网站、网站推广、国际域名空间、虚拟主机、企业邮箱。业务覆盖桂阳地区。

css让图片不变形的实现方法:首先创建一个HTML示例文件;然后在body中添加img标签并引入图片;最后通过设置“max-height”或者“max-width”属性来实现图片不变形即可。

如果想要图片不变形就是设置max-height或者max-width中的一个,或固定width或者height中的一个。

max-height与max-width属性设置元素的最大高度和宽度。

属性值:

none 默认。定义对元素被允许的最大高度没有限制。

length 定义元素的最大高度值。

% 定义基于包含它的块级对象的百分比最大高度。

inherit 规定应该从父元素继承 max-height 属性的值。

height与width属性设置元素的高度与宽度。

属性值:

auto 默认。浏览器会计算出实际的高度。

length 使用 px、cm 等单位定义高度。

% 基于包含它的块级对象的百分比高度。

inherit 规定应该从父元素继承 height 属性的值。

示例:



 

    
    
    
    div {
        float: left;
    }     
    .test1 img {
        width: 187.5px;
        height: 156.5px;
    }     
    .test2 img {
        width: 300px;
        height: 100px;
    }     
    .test3 img {
        max-width: 300px;
        max-height: 100px;
    }     
    .test4 img {
        max-width: 100%;
        height: 200px;
    }     
    .test5 {
        width: 300px;
        height: 200px;
    }     
    .test5 img {
        max-width: 100%;
        max-height: 100%;
    }     
    .test6 {
        width: 300px;
        height: 100px;
        /*overflow: hidden;*/
    }     
    .test6 img {
        max-width: 300px;
        max-height: 100px;
    }    
    .test7 {
        width: 300px;
        height: 100px;
        /*overflow: hidden;*/
    }     
    .test7 img {
        max-width: 300px;
    }
    
 

    
        
    
                  
                  
                                                                      

效果如图:

css如何让图片不变形

以上是“css如何让图片不变形”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享题目:css如何让图片不变形
URL链接:http://6mz.cn/article/igdiod.html

免费获取网站建设与品牌策划方案报价

*主要业务范围包括:高端网站建设, 集团网站建设(网站建设网站制作)找网站建设公司就上快上网。
提交需求

    联系我们

    028-86922220
  • 手机:13518219792
  • 地址:成都市太升南路288号锦天国际A幢1002号
  • 24小时服务热线:400-028-6601

    网站建设服务

  • 网页设计
  • 网站制作
  • 网站开发

    网站推广服务

  • 营销网站建设
  • 百度快速排名
  • 整站网站推广

    网站运维服务

  • 基础维护
  • 网站改版
  • 网站维护

    FOLLOW US

  • 微信二维码

    微信二维码

Copyright © 2022 成都快上网科技有限公司 成都网站建设公司-选网站建设公司快上网!国内专业的网站制作公司!
All Rights Reserved 版权所有 蜀ICP备19037934号-11