如何实现大图居中超过的部分两边自动隐藏

　　现在大多数用的显示器都是大屏的，所以我们美工在设计海报时都会用大图，但还是有一部分朋友是用小屏幕，那么，如何实现大图居中超过的部分两边自动隐藏呢？ytkah也遇到这样的情况，一起来看看怎么解决吧

<div style="overflow: hidden; width: 1920px; height:623px;">
    <img style="margin-left:-960px; position: absolute; left: 50%;" src="http://www.qdhxeye.com/special/hlj/img/hlj_01.png" alt="" />
</div>

　　需要为div设置一个高度，本例是623px，自动隐藏的属性overflow:hidden。然后要为图片设置left：50%；margin-left:960px（图片长度的一半）；position：absolute；

　　这样改造之后基本上通用的屏幕都能正常显示图片的中间部分，不会出现左右推移的情况发生

时间： 2024-10-14 00:55:23

如何实现大图居中超过的部分两边自动隐藏的相关文章

jQuery将物体居中，并且转换显示和隐藏

今天来给大家贴一段代码,代码的作用就是利用jQuery将物体居中,并且转换显示和隐藏: 首先建立一个div标签并且写好css样式,具体如下 然后我想要的效果是当我点击了button这个按钮,test可以居中显示,第二次点击一次test消失,第三次点击又居中显示,这样循环下去: 具体js代码如下: 稍微解释一下代码的意思: 1.$('#test').get(0).flag = true;是为了建立一个标识,告诉浏览器什么时候应该显示,什么时候应该隐藏 2.上面的top就是让浏览器窗口的高度减去自己

mysql完整备份，超过十天的自动删除

#!/bin/bash #Author [email protected] cd /sqlbak /usr/local/mysql/bin/mysqladmin -uroot -p123456 flush-logs MAXIMUM_BACKUP_FILES=10 BACKUP_FOLDERNAME="database_backup" DB_HOSTNAME="localhost" DB_USERNAME="root" DB_PASSWORD=&q

超过宽度和高度文字会自动隐藏 --费元星

页面中table宽度设置width="600px"之后,宽度仍然不是固定的,文字太长后不换行,把table都撑变形了. 解决办法: 1.table 设置 宽度,绝对宽度和相对都可以 table-layout:fixed ; 设置了这个属性,其余所有td都是相同的宽度. 这样操作之后,table是宽度固定了,但是里面的文章如果很长,文字会覆盖 解决办法: 在 td 里面 加上 style="word-wrap:break-word;" 自动换行就好了,如果不想换行,可

python学习之路之案例0（实现登录功能，登录错误次数超过3次，自动退出登录）

一.整个案例运用到的知识点 1.python字典.字符串.列表的灵活转换和使用 2.python数据结构之字符串:字符串的格式化.字符串的去空格(strip()) 3.python数据结构之字典:字典的构建.字典和字符串的转换 4.python数据结构列表:列表的构建.列表和字符串的转换 5.if....else....判断的使用 6.for循环.while True死循环的使用 5.文件的打开.读取.关闭等功能的使用 二.整个案例的设计的中心思想 1.首先读取用户表文件里面的字符串:包括用户名

小程序-超过长度自动隐藏并显示省略号

overflow: hidden; /*超过长度自动隐藏*/ text-overflow: ellipsis;/*添加省略号*/ white-space:nowrap;/*不换行*/ 注意:必须用text标签才能出现省略号,view不行 font-family:字体名 可以选择字体,具体需要去百度上面找 原文地址:https://www.cnblogs.com/Falling-snow/p/10089539.html

js和css实现内容超过边框，就自动省略，自动添加title

在项目汇总,我们有这样的需求,如果内容多了,就自动省略,自动添加title 这个需要判断判断俩个值,一个是width(),一个是scrollWidth, 在div中,如果内容没有超过边框,这俩个值是一样的,就是css设置的宽度:如果内容超过边框了,scrollWidth的值会大于width,所以我们可以通过判断scrollWidth和width的值 来知道内容是否超过边框 例: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <

超过一定高度对象自动悬浮

<script type="text/javascript"> var navH = document.getElementById('id').offsetTop;//获取要定位元素距离浏览器顶部的距离 window.onscroll = function(){ var scroH = document.documentElement.scrollTop || document.body.scrollTop;//获取滚动条的滑动距离 var bar = document.

css中的特殊居中

大图居中: 先看一下普通的居中: 代码为: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .img{ display: block; margin: auto; } </style> </head> <body>

JQuery列表模式大图模式切换

=.= 小菜鸟 大家多多关照 么么哒 将默认列表模式的HTML存储在变量中,从列表模式的HTML动态构造大图模式的HTML内容,存储在变量中 $(function() { **动态加载图书分类** function productList() { //创建图书分类数组 var $list = new Array('中国当代小说(13880)', '中国近现代小...(640)', '中国古典小说(1547)', '四大名著(696)', '港澳台小说(838)', '外国小说(5119)', '