窗口拖动,图片缩放与垂直居中的问题 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

窗口拖动,图片缩放与垂直居中的问题

2016-06-07 20:15:20 1736 1

我最近在用electron框架,做一个漫画阅读器
现在遇到如下问题,

我想让我的阅读器,在单页模式显示时,
图片垂直居中显示,且尺寸不超出容器。

<div>
    <img src="./image.png" alt="image" />
</div>

div {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

不拖拉窗口的时候,图片可以按照预期样子显示。
但是一旦拖拉窗口,图片就会发生变形。不过刷新之后,又回恢复正常。

如果改变dom结构,去掉,让图片作为div的背景显示的话,
可以解决拖动变形的问题,但切换图片时,会有的闪烁效果,刺瞎狗眼。

( GIF 图片一直上传失败,看这里吧 )

请问我该怎么做,既能防止图片变形,又不出现闪烁效果

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:30:59
    img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    0 0
相关问答

1

回答

flink1.10.2 读取mysql并打印数据,本地可以执行,yarn上报错,什么原因呢

2021-12-02 14:57:24 343浏览量 回答数 1

1

回答

python中的数学函数fabs(x)的意思是什么?

2021-11-04 18:46:36 356浏览量 回答数 1

2

回答

云服务器ECS怎么绑定域名呢,域名已经备案好了,还是访问不了

2017-01-19 17:30:41 5147浏览量 回答数 2

1

回答

我在aliyun上边注册了com域名,在国外买了空间,请问需不需要备案?

2016-11-01 19:43:48 2110浏览量 回答数 1

1

回答

:怎样通过捏合手势缩放图片

2016-06-29 15:41:00 1973浏览量 回答数 1

1

回答

滚轮滚动切换页面图片的效果

2016-06-02 13:44:50 1692浏览量 回答数 1

1

回答

css布局时,普通文档流中块框的垂直外边距为什么会发生叠加?

2016-06-02 16:34:47 1773浏览量 回答数 1

1

回答

css布局时,普通文档流中块框的垂直外边距为什么会发生叠加?

2016-05-26 17:17:57 1434浏览量 回答数 1

1

回答

java项目上传、使用图片的问题

2016-03-25 17:29:19 1722浏览量 回答数 1

0

回答

雅虎邮箱绑定问题跪求帮忙

2014-12-30 16:57:08 3951浏览量 回答数 0
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载