js+css设置图片进行动态显示调整。

.divImg{

width:233px;
height:214px;
border:1px solid #e5e5e5;
overflow: hidden;
text-align: center;

}

<div class="divImg">

<img src="path">

</div>

主要是设置Img标签外层div样式,overflow: hidden;

$("img").load(function(){
 $.each($(".divImg>a>img"),function(){
    drawImage(this,233,214);//动态设置宽高值
 });
});

function drawImage(ImgD, FitWidth, FitHeight) {

var image = new Image();
image.src = ImgD.src;
if (image.width > 0 && image.height > 0){
var width = image.width;
var height = image.height;
if(width > FitWidth){
if(width>height){
$(ImgD).css("height","100%");
}
else if(width<height){
$(ImgD).css("width","100%");
}else{

//相等(正方形)
$(ImgD).css("width","100%");
$(ImgD).css("height","100%");
}

}

}}

超宽:

原图:

超高:

原图:

注意:我这里系统的图片宽度永远大于我设定的值,所以只判断了宽,高度判断可以增加

时间: 2024-11-09 10:56:27

js+css设置图片进行动态显示调整。的相关文章

Node.js压缩web项目中的js,css和图片

安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功 安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是npm install xxx ,我之前安装都是不适于全局安装的,这个应该无所谓 编写压缩的js(应该很好看懂) /*******压缩JS******/ var fs = require('fs'); var uglify = require("../../nodejs/node_modules/u

Css设置图片垂直居中

说明:样式设置主要是针对图片的父级元素,并非图片元素本身. Css代码[图片父级点的样式]: <style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-f

css设置图片水平及垂直居中

.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/ width:200px;

关于HTML+CSS设置图片居中的方法

有的时候我们会遇到这样一个问题,就是当我们按下F12进行使用firebug调试的时候,我们发现图像没有居中,页面底下有横向的滑动条出现,图片没能够居中,默认状态下只是紧靠在页面最左侧,而我们对图像缩小的时候,图像依然紧靠在页面最左侧,所有我们需要对图像设置居中,无论放大或者缩小页面,都使得图像至始至终都显示在页面的中间. 代码如下 HTML: <html> <head> </head> <body> <div class="backgroun

网页设计入门--使用css设置图片样式

一.定义图片边框 方法1: border-style:dotted(点划线)|dashed(虚线)|solid; border-color:参数; border-width:数值; 方法2: border:style(必须放在第一个位置) color width; 方法3: border-left-style:solid; border-right-color:#cacece; border-bottom-width:2px; 方法4: border-style:dotted solid das

css设置图片居中、居左、居右

CreateTime--2017年12月8日14:25:09 Author:Marydon 图片一般默认是居左显示的,如何更改它的水平位置呢? <div style="border:1px solid red;">图片居中展示</div> <img style="display:block; margin:0 auto;" src="http://files.cnblogs.com/files/Marydon20170307/

使用CSS将图片转换成黑白(灰色、置灰)

CSS3 greyscale 滤镜实现 效果如下: 用滤镜实现hover 效果. //dom节点 <img class="filter" src="img/index/hx2.png"> css设置图片滤镜为灰色 .filter{ filter: grayscale(100%);} 用jq实现hover效果 $(".filter").hover(function() { $(this).css('filter','grayscale(

用 JS 设置图片的最大宽度

//用 JS 设置图片的最大宽度    function setImgsMaxWidth() {        $('.answerimg img').each(function () {            $(this)[0].onload = function () {                var maxWidth = 1100; // 图片最大宽度                 var ratio = 0;  // 缩放比例                 var widt

iis 发布asp.net mvc 网站时候js css 压缩问题,图片不加载问题

一.JS CSS 自动压缩问题 默认情况下mvc这个框架会把css,js文件压缩成一个js或者css文件,一会发现只有一个<link href="/Content/css?v=ji3nO1pdg6VLv3CVUWntxgZNf1zRciWDbm4YfW-y0RI1" rel="stylesheet"/>  和一个<script src="/bundles/modernizr?v=qVODBytEBVVePTNtSFXgRX0NCEjh9U