技术资讯

统一宽高的列表图片JS判断宽高自动截取中间最佳部分

2016-08-19 10:41:00

最近在研究QQ空间中图片列表中的图片JS自动判断宽高并截取中间最佳部分的代码应用于青岛网站建设，这个效果用语言不太好表达，具体来说，就是在一个图片列表中，每个图片的宽高都是统一的，但是因为图片本身会有的高，有的宽，这就需要根据图片宽高属性，如果是高的图，就JS判断后宽度显示100%，高度截取中间部分，如果是宽图，则JS判断后高度显示100%，宽度截取中间部分。

如下图：起重机的那张宽型图，虽然图片高度像素比列表区域小，但是也会自动显示100%高度，同时截取图片宽度的中间部分。而第二张图片恰恰相反，因为是高型图片，所以宽度100%，高度自动截取中间部分。

JS判断的语句如下：

$(window).load(function() {

$("#newscontent2 .img img").each(function() {

var maxwidth = 224;

var maxheight = 137;

var thisHeight = $(this).height();

var thisWidth = $(this).width();

//如果宽为224

var w224Height = thisHeight / (thisWidth / 224);

//如果高为137

var h137Width = thisWidth / (thisHeight / 137);

if (w224Height > maxheight) {

$(this).width(maxwidth);

$(this).height(w224Height);

$(this).css('left', '0');

$(this).css('top', '50%');

$(this).css('margin-top', -w224Height / 2);

} else {

$(this).height(maxheight);

$(this).width(h137Width);

$(this).css('top', '0');

$(this).css('left', '50%');

$(this).css('margin-left', -h137Width / 2);

}

});

</script>

CSS代码如下：

#newscontent2 li .img{ float:left; width:224px; height:137px;position:relative;overflow:hidden;}

#newscontent2 .img img{position: absolute; left: 50%; top: 50%; z-index: 999;}

这种效果，最大的好处就是无须手动ps图片宽高，就可以通过网站后台上传到图片列表，并且让图片不变形，显示图片最佳位置，增强用户体验。

上一篇：dw去掉html中的多余空行

下一篇：如何利用微信高级接口？

近期更新

[2023-07-26 14:17:28] 为品牌赋能，海外官网品牌数字化
[2023-05-06 10:32:26] 青岛网站建设公司,品牌网站定制,一站式网站服务——力图数字科技
[2023-04-27 13:47:54] 品牌定制网站建设——从满足预期到走向超预期
[2023-04-11 09:17:49] H5页面设计开发——移动端传播利器
[2022-11-16 10:11:43] windows2012程序在哪
[2022-04-14 11:01:47] 力图数字科技配套网站服务支持
[2021-05-18 10:14:11] 青岛网站建设的流程
[2021-04-29 10:14:38] 企业定制化官网建设项目
[2021-03-05 10:34:45] 移动互联时代房地产行业的微信小程序解决方案
[2021-01-22 17:29:38] 微信小程序有哪些优势？为什么要开发微信小程序？
[2021-01-08 17:28:04] 网站建设最容易忽略的人性化设计
[2020-12-16 16:55:32] 建设一个常规的公司网站建设成本大概是多少？

解决方案

轮胎行业网站设计解决方案机械行业网站设计解决方案房地产行业网站设计解决方案科技企业网站设计解决方案电子家电网站设计解决方案食品行业网站设计解决方案集团公司网站设计解决方案企事业单位网站设计解决方案外贸行业网站设计解决方案健身运动网站设计解决方案美容与化妆品网站设计解决方案建筑设计行业网站设计解决方案物流行业网站设计解决方案

信息动态

网站设计是技术与创意的融合!

技术资讯

统一宽高的列表图片JS判断宽高自动截取中间最佳部分

2016-08-19 10:41:00

近期更新

延伸阅读

解决方案

TAGS关键字