图片样式和下载

荣默默

于 2020-05-04 10:56:02 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

文章标签： javascript jquery css

本文链接：https://blog.youkuaiyun.com/rt2016/article/details/105914539

本文介绍了如何使用CSS实现图片在网页中水平垂直居中的方法，以及通过JavaScript提供图片下载功能的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.图片水平垂直居中：

{
    display: inline-block;
    margin: 0 auto;
    object-fit: cover;//被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。（fill/contain/none/scale-down等属性）
    width: 100%;
    height: 100%;
    
}

2.图片的下载：

 downloadIamge:function (url, name) {  
            // 将图片的src属性作为URL地址  
            var url = url;  
            var a = document.createElement('a');  
            var event = new MouseEvent('click');  
            a.download = name || '下载图片名称';  
            a.href = url;  
            a.dispatchEvent(event);  
        },
        
        downloadIamge(图片的url,下载图片的命名);