【css】让img图片居中显示

ゝ一纸荒年。 2022-10-19 04:19 205阅读 0赞

#### 1.说明 ####

想要点击一下居中展示一张图片，可以使用fixed布局，展示图片的时候背景呈半透明黑色，再点击即隐藏

#### 2.代码 ####

HTML

<div id="div_qr_img">
        <img id="img" src="" alt="">
    </div>

css

#div_qr_img { 
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 100;
        display: none;
        background: rgba(0, 0, 0, 0.7);  /* 半透明背景 */
    }
    
    #img { 
        width: 300px;
        height: 300px;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        /* 图片宽度高度的一半才能居中 */
        margin-left: -150px;
        margin-top: -150px;
    }

js，需要用到jQuery，自行引入

// Ajax请求之后显示结果
    function showResult(response) { 
        console.log(response)
        ...
        if (response["code"] == 3) {  // 返回谷歌验证码图片
            $("#img").prop({ 
                "src": "data:image/png;base64," + response["base64"]
            })
            $("#div_qr_img").show()
        }
    }
    // 点击隐藏图片
    $("#div_qr_img").click(function() { 
        $("#div_qr_img").hide()
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS样式-图片居中显示

前言在前端开发的过程中，越来越体会到css样式的重要性。实现效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n...

桃扇骨/ 2024年04月18日 09:05/ 0 赞/ 53 阅读

相关【css】让img图片居中显示

1.说明想要点击一下居中展示一张图片，可以使用fixed布局，展示图片的时候背景呈半透明黑色，再点击即隐藏 2.代码 HTML <div id="di

ゝ一纸荒年。/ 2022年10月19日 04:19/ 0 赞/ 206 阅读

相关 css实现图片上下居中显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

我就是我/ 2022年09月22日 15:58/ 0 赞/ 191 阅读

相关 Markdown编辑器让图片居中

在markdown里默认插入图片一般默认都是居左显示想要让图片居中就得使用下面的html代码来实现 <center> <img src="这里输入图片地址

短命女/ 2022年08月28日 00:37/ 0 赞/ 259 阅读

相关 css垂直居中--img p

因为p标签和img居中的方法我知道的不多就放到一起了！ 1.单行文字的居中很简单一个text-align:center; line-hegight: 父级div的高度。

水深无声/ 2022年07月16日 00:13/ 0 赞/ 202 阅读

相关 CSS之未知高度img垂直居中

效果如下： ![Center][] 测试代码如下：（能够水平居中，通过text-align:center实现） <style> .box{ widt

深藏阁楼爱情的钟/ 2022年06月07日 01:44/ 0 赞/ 210 阅读

相关 css让图片居中

css让图片居中，不管图片是方图、竖图、横图，都可以让图片在父框架下居中，即方图则占满整个父框架；横图则左右填充上下居中；竖图则左右居中上下填充 1、html如下：

不念不忘少年蓝@/ 2022年06月04日 08:28/ 0 赞/ 259 阅读

相关 img显示base64图片

<img alt="Red Star" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0e

短命女/ 2022年05月31日 05:16/ 0 赞/ 288 阅读

相关 css 如何让图片居中图片适应

前段时间做移动端开发遇到的问题，以前是没注意到css有个object-fit属性，一直对图片适应不知道何从下手。移动端基本上都是需要做图片适应处理的，比如轮播图，商品封面

小鱼儿/ 2022年02月27日 06:00/ 0 赞/ 269 阅读

相关 css中如何让过宽的图片在页面中居中显示

在做网页的时候，插入一张图片，发现这张图片过宽，中间重要的内容不能完全显示出来，如下图所示 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shad

朱雀/ 2022年01月17日 02:23/ 0 赞/ 365 阅读