`
inchinav5
  • 浏览: 1213 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

图片相对某元素铺满居中

阅读更多
var center = {
	init : function(obj){
		var thisFa    = obj.parent();       //获取对象父级的对象
		var this_imgW = obj.width();        //当前图片的宽度
		var this_imgH = obj.height();       //当前图片的高度
		var thisFaW   = thisFa.width();     //父元素的宽度
		var thisFaH   = thisFa.height();    //父元素的高度
		var ratioF    = thisFaW/thisFaH;    //父级宽度和高度的比例
		var ratioS    = this_imgW/this_imgH;//当前元素宽度和高度的比例
		var rarr      = center.newSize(ratioF,ratioS,this_imgW,this_imgH,thisFaW,thisFaH);
		center.imgCenter(rarr,thisFa,obj);
	},
	imgCenter : function(rarr,thisFa,obj){
		thisFa.css({'position':'relative','overflow':'hidden'});
		obj.attr('height',rarr[1]).attr('width',rarr[0]).css({'position':'absolute',
															  'top':'50%',
															  'left':'50%',
															  'margin-left':-(rarr[0]/2),
															  'margin-top':-(rarr[1]/2)
															  });//如果我自己用的话我就创建一个叫positA的class将定位写进去然后在这里直接给元素添加一个css
	},
	isWidth : function(ratioF,ratioS){
		if(ratioF > ratioS){
			return false;
		}else{
			return true;
		}	
	},
	newSize : function(ratioF,ratioS,this_imgW,this_imgH,thisFaW,thisFaH){
		var istrue = center.isWidth(ratioF,ratioS);
		var arr = new Array();
		if(!istrue){
			//以宽度为基准
			var height = (thisFaW/this_imgW)*this_imgH;
			arr[0] = thisFaW;
			arr[1] = height;
		}else{
			//以高度为基准
			var width = (thisFaH/this_imgH)*this_imgW;
			arr[0] = width;
			arr[1] = thisFaH;
		}
		return arr;
	}
}

 

分享到:
评论

相关推荐

    图片自动居中

    图片大于父级尺寸,铺满居中; 图片小于父级尺寸,原尺寸原比例居中; 用法:图片的父级需要设置属性相对“position: relative” 需要居中的图片需要设置属性绝对“position: absolute” 调用方法:$("图片对象")...

    图片水平垂直居中

    在网页设计中,让图片水平垂直居中是一个常见的需求,特别是在构建响应式布局或需要保持元素在不同屏幕尺寸下居中的场景。本文将详细介绍如何使用简洁的代码来实现这一目标,适用于各种现代浏览器。 首先,我们可以...

    【html背景图片铺满网页】html 怎么让背景图铺满整个页面

    下面是一个基本示例,展示如何设置一个背景图片铺满整个页面的HTML元素: ```html <!DOCTYPE html> , initial-scale=1.0"> body { margin: 0; padding: 0; height: 100vh; /* 使用视口高度使body充满...

    summernote图片居中显示

    这段代码将新插入的图片的`display`属性设置为`block`,这样图片就会占据一整行,并且通过设置`margin`为`0 auto`,使图片在父元素中水平居中。 另外,`summernote-zh-CN.min.js`是Summernote的中文语言包,它包含...

    图片铺满屏幕自适应大小

    在网页设计中,让图片自适应屏幕大小并铺满整个屏幕是常见的需求,尤其是在现代响应式设计中。本文将深入探讨如何使用JavaScript和CSS技术来实现这一目标。 首先,我们从CSS方面开始。CSS3引入了`background-size`...

    CSS2.1如何让块元素垂直水平居中.rar

    在网页设计中,让元素在页面上垂直和水平居中是一项常见的需求,特别是在CSS2.1规范中。本文将深入探讨如何使用CSS2.1来实现这一目标,无论是对于已知宽高还是未知宽高的块级元素(div)。首先,我们需要理解CSS布局...

    css3块元素居中

    对于多行文本、图片或块状元素的竖直居中,有以下两种常见方法: #### 方法一:使用`table`标签和`vertical-align:middle` 这种方法涉及创建一个包含`tbody`、`tr`和`td`的`table`结构。通过在`td`上设置`vertical...

    Jsp中如何让图片在div中居中

    然而,当图片作为某个元素的子元素时,可以通过设置父元素的display属性来间接实现图片的居中。 在示例中,为了在div中居中图片,使用了display:table-cell样式。这个样式将div视为一个表格单元格,通过vertical-...

    DIV+CSS 图片垂直居中效果

    在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`<div>`元素是一...

    富文本summernote.js 图片居中

    `text-center`是Bootstrap中的类,用于水平居中元素。 3. **自定义按钮**:另一种方法是创建一个自定义按钮,用户点击后插入居中图片。这需要你理解Summernote的插件机制,并编写相应的JavaScript代码。 4. **使用...

    图片垂直居中样式

    在网页设计与开发中,实现图片的垂直居中是一个常见的需求,尤其是在响应式设计和页面布局优化中。本文将深入探讨“图片垂直居中样式”的实现方法,通过分析给定的代码片段,详细解释其中涉及的关键CSS技术点,以及...

    网页图片垂直居中

    在网页设计中,让图片或其他元素垂直居中是一项常见的需求,尤其在响应式设计和现代网页布局中尤为重要。本文将详细介绍如何实现网页图片的垂直居中,并提供多种方法供参考。 1. **CSS Flexbox** Flexbox是CSS3中的...

    图层中图片垂直水平居中

    设置容器为相对定位,图片为绝对定位,并通过top、bottom、left、right的50%值,再配合负的margin来达到居中效果。 ```css .container { position: relative; } .image { position: absolute; top: 50%; left:...

    自适应居中图片轮播

    在网页设计中,自适应居中图片轮播是一种常见的交互元素,它能够为用户提供动态、美观的视觉体验,同时能够适应不同的屏幕分辨率和设备尺寸。本文将深入探讨自适应居中图片轮播的设计原理和实现方法,以及相关技术在...

    图片居中.htm

    图片居中.htm 图片居中.htm 图片居中.htm

    VMiddleImg图片居中裁切效果

    "VMiddleImg图片居中裁切效果"是一种常见的图片处理技术,它主要用于确保图片在不同尺寸的屏幕上都能够以居中且比例合适的形态展示。这种技术通常结合JavaScript(js)和CSS(层叠样式表)来实现,以适应网页的响应...

    图片的水平垂直居中

    在网页设计中,图片的水平垂直居中是一个常见的需求,特别是在构建响应式布局或需要保持元素视觉平衡时。本文将详细探讨如何实现图片在div层的居中,并着重解决垂直居中这一相对复杂的任务,同时考虑浏览器的兼容性...

    html图片居中图片列表左右切换可放大展示特效

    在网页设计中,实现"html图片居中图片列表左右切换可放大展示特效"是一种常见的功能需求,主要用于增强用户体验,使用户能更直观地查看和交互图片。以下将详细讲解这个功能涉及的关键知识点。 1. HTML 结构:首先,...

Global site tag (gtag.js) - Google Analytics