大图(宽图)在任意宽度浏览器内显示原尺寸、并居中、无导航条CSS_CSS学习

资料来源：网络整理时间：2023/3/4 0:55:59 共计：3628 浏览

相关：《长图(宽图)任何宽度浏览器内原尺寸居中，不产生导航条，超出使用背景色》（不如本文分享的居中代码精简，但兼容性较好）

今天写zblog主题的时候遇到了一个难题，就是图片（非背景图）必须居中显示，且图片宽度在1920px，网站主题宽度1180px，要求图片在任何1180-1920浏览器宽度内都要居中显示，且高度宽度不变，并且图片一直居中于浏览器中间！

如下图：

要求图片一直居中于浏览器中，必须保持原有尺寸，且不能有多余的导航条显示，遍寻代码！

终于被找到一个，原理还没搞定，先分享了：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>大图(宽图)在任意宽度浏览器内显示原尺寸、并居中、无导航条CSS</title>

</head>

<body>

<style>

#tt {width: 100%;height:300px;overflow: hidden;}

#tt img

{width:1920px;margin:0 calc(50% - 960px);}

</style>

<div id="tt"><img src="
http://localhost/zb_users/upload/2017/04/201704011490981779830210.png
" width="1920" height="300" /></div>

</body>

</html>

以上代码实现的效果已经做了动图，如上图所示。

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：图标：文字的前缀图标 - 背景图片方式_CSS学习 | ·下一条：jQuery 点击显示隐藏CSS - toggleClass() 方法_js/jQuery