福州建网站-福州做网站公司
福州做网站电话:0591-83584081 点击在线即时聊天-福州建站 点击在线即时聊天-福州网站建设
新闻中心
行业新闻
INDUSTRY NEWS
企业动态
ENTERPRISES DYNAMIC
网络编程
INTERNET KNOWLEDGE
网站优化
SEO

 
在线客服咨询一:
在线客服咨询二:
在线技术咨询一:
在线技术咨询二:
24小时在线咨询:
在线咨询:0591-83584081
 最新行业资讯
苏宁研制自动送货机器人
京东便利店模式:并非直
疯狂的区块链,分裂的朋
双11有什么优惠,支付宝推
“马云的战略+马化腾的产
福州管道疏通推荐福州榕
共享单车还能走多远,二
公众号“意外艺术”获得
♦ 您现在的位置:亿联网络 >> 新闻中心 全方位电子商务策划 设计 营销 推广

文章内容页图片自动居中,自适应电脑手机,宽度100%
本文来源:网络  发表日期:2017-7-25 12:11:36  录入:www.yiliancn.com

发表文章时,需要上传图片,很多内容编辑器对图片的处理是居左显示的吧.另外,如果是响应式的HTML5网站,还存在一个图片宽度太宽显示不全的问题.

这种情况,在后台上传图片时,如下图,上传成功后,图片宽度默认是图片的真实宽度,可以把他设置为100%,或留空不填,高度也留空不填.


内容页假如这样写法

?
1
这里是内容及图片

cs样式可以如下写法.如果担心在电脑上浏览时,图片过大撑破页面,可以增加一个类似这种样式.max-width:650px

1
2
3
4
5
6
7
.detail  img{
display:block;margin:0 auto;padding:10px; /* max-width:650px */
}
/*以下为兼容手机代码*/
@media(max-width:760px){
.detail  img{max-width: 100%;height: auto;width: auto\9;}
}



还有一种写法(待测试)


纯js实现div内图片自适应大小----神器版!

?script  type="text/javascript" language="javascript">
window.onload=function(){
changeImgSize();
}
function changeImgSize(){
var getContainer=document.getElementById('imgcontainer');
var getIMG=getContainer.getElementsByTagName('img')[0];
var fw=getContainer.offsetWidth-(2*getContainer.clientLeft);
var fh=getContainer.offsetHeight-(2*getContainer.clientTop);
var iw=getIMG.width;
var ih=getIMG.height;
var m=iw/fw;
var n=ih/fh;
if(m>=1&&n<=1)
{
iw=Math.ceil(iw/m);
ih=Math.ceil(ih/m);
getIMG.width=iw;
getIMG.height=ih;
}
else if(m<=1&&n>=1)
{
iw=Math.ceil(iw/n);
ih=Math.ceil(ih/n);
getIMG.width=iw;
getIMG.height=ih;
}
else if(m>=1&&n>=1)
{
getMAX=Math.max(m,n);
iw=Math.ceil(iw/getMAX);
ih=Math.ceil(ih/getMAX);
getIMG.width=iw;
getIMG.height=ih;
}
if(getIMG.height {
var getDistance=Math.floor((fh-getIMG.height)/2);
getIMG.style.marginTop=getDistance.toString()+"px";
}
}
?/script>

以下是html代码:

<div class="sy_pic" id="imgcontainer"><img src="images/444.jpg" />

分享到:
 
网站备案/许可证号:闽ICP备06051533号-1
联系地址:福州市仓山区金山榕城广场8座201
联系电话:0591-83584081 联系QQ:1005609337
网站标签:福州网站建设 福州微信营销 福州企业邮局 福州微信商城开发 福州400电话申请
 
点击这里给我发消息