如何实现大图居中超过的部分两边自动隐藏
时间:2022-05-03
本文章向大家介绍如何实现大图居中超过的部分两边自动隐藏,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
现在大多数用的显示器都是大屏的,所以我们美工在设计海报时都会用大图,但还是有一部分朋友是用小屏幕,那么,如何实现大图居中超过的部分两边自动隐藏呢?ytkah也遇到这样的情况,一起来看看怎么解决吧
<div style="height: 355px; overflow: hidden; position: relative; width: 100%;">
<img alt="华厦眼科医院集团" src="http://www.tongruieye.com/xeyk/images/jtfbt.jpg" style="display: block; height: 355px; left: 50%; margin-left: -960px; position: absolute; width: 1920px;">
</div>
需要为div设置一个高度,本例是335px,自动隐藏的属性overflow:hidden;注意position: relative。然后要为图片设置left:50%;margin-left:-960px(图片长度的一半);position:absolute;
这样改造之后基本上通用的屏幕都能正常显示图片的中间部分,不会出现左右推移的情况发生
- $(window).load()与$(document).ready()的区别
- silverlight 双击事件
- Silverlight button 图片切换样式
- 【腾讯云CDB】教你玩转MyRocks/RocksDB—STATISTICS与后台线程篇
- Caliburn.Micro学习笔记(一)----引导类和命名匹配规则
- SpringMVC下Excel文件的上传下载
- Spring-AOP之aspectj注解方式
- wpf键盘记录器
- WPF之TreeList的实现方法(一)
- Silverlight 2 Beta 2的Isolated Storage
- hive安装部署
- java匿名内部类简介
- 精典算法之详解 河内之塔
- 精典算法之二分查找法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 从零学Paddle系列-1 Paddle框架CNN相关API详解
- 智能搜索模型预估框架的建设与实践
- 1,Jupyter NoteBook 常用魔法命令
- 60行代码徒手实现深度神经网络
- 30行代码徒手实现logistic回归
- 8,模型的训练
- 在腾讯云上部署科学计算软件Amber
- 手把手教你搭建一个灰度发布环境
- Kibana: 如何使用 Search Bar
- 「PHP」以nginx、php-cgi为例,把nginx、php-cgi安装为Windows系统服务
- 聊聊dubbo-go的GenericFilter
- 知新 | koa框架入门到熟练第二章
- JVM学习二
- 微信小程序对接云开发录音文件识别nodejs sdk
- 利用python读取WORD文档中的创建者信息