商业源码 我的li中设置的高宽限制了，其中有个img宽度大于li的宽度但是高度少于li，现在想让img在li居中显示。
问题中没有显示出来和ul的关系
图上的css限制的是ul的宽度和高度，，的宽高应该通过img标签的属性进行控制，或者指定到你想要控制的（img标签）控制。
控制宽高的方法实例：
<img src="xxxxjpg" width=400px height="600px" />
<img src="xxxxjpg" style="width:400px;height:600px" />
css中通过
img{width:400px;
height:500px;
}
希望可以帮到你
参考dedecms的帮助文档中的arclist标签
标签名称：arclist
标记简介：织梦常用标记，也称为自由列表标记，其中imglist、imginfolist、specart、coolart、autolist都是由该标记所定义的不同属性延伸出来的别名标记。
功能说明：获取指定文档列表
适用范围：全局使用
基本语法：
{dede:arclist flag='h' typeid='' row='' col='' titlelen='' infolen='' imgwidth='' imgheight='' listtype='' orderby='' keyword='' limit='0,1'}
<a href='[field:arcurl/]'>[field:title/]</a>
{/dede:arclist}
参数说明：
col='' 分多少列显示（默认为单列），53版中本属性可以通过多种方式进行多行显示
如果col='1'要多列显示的可用div+css实现
以下为通过div+css实现多列的示例：
<style type=text/css>
div{width:400px;float:left;}
</style>
{dede:arclist row='10' titlelen='24' orderby='pubdate' idlist='' col='2'}
•[field:textlink/]([field:pubdate function=MyDate('m-d',@me)/])<br/>
{/dede:arclist}
当col>1将使用原来的table多列方式显示
row='10' 返回文档列表总数
typeid='' 栏目ID,在列表模板和档案模板中一般不需要指定，在首页模板中允许用","分开表示多个栏目；
getall='1' 在没有指定这属性的情况下,在栏目页、文章页模板,不会获取以","分开的多个栏目的下级子类
titlelen = '30' 标题长度 等同于titlelength
infolen='160' 表示内容简介长度 等同于infolength
imgwidth='120' 缩略图宽度
imgheight='90' 缩略图高度
listtype='all' 栏目类型 image含有缩略图 commend推荐
orderby='sortrank' 文档排序方式
§ orderby='hot' 或 orderby='click' 表示按点击数排列
§ orderby='sortrank' 或 orderby='pubdate' 按出版时间排列
§ orderby='near'
§ orderby=='lastpost' 按最后评论时间
§ orderby=='scores' 按得分排序
§ orderby='id' 按文章ID排序
§ orderby='rand' 随机获得指定条件的文档列表
keyword='' 含有指定关键字的文档列表，多个关键字用","分
innertext = '' 单条记录样式
aid='' 指定文档ID
idlist ='' 提取特定文档（文档ID）
channelid 频道ID
limit='起始ID,记录数' （起始ID从0开始）表示限定的记录范围（如：limit='1,2' 表示从ID为1的记录开始，取2条记录）
flag = 'h' 自定义属性值：头条[h]推荐[c][p]幻灯[f]滚动[s]跳转[j]图文[a]加粗[b]
noflag = '' 同flag，但这里是表示不包含这些属性
orderway='desc' 值为 desc 或 asc ，指定排序方式是降序还是顺向排序，默认为降序
subday='天数' 表示在多少天以内的文档
用arclist调用于附加表字段的方法：
要获取附加表内容，必须符合两个条件
1、指定 channelid 属性
2、指定要获得的字段 addfields='字段1,字段'
如：
{dede:arclist addfields='filetype,language,softtype' row='8' channelid='3'}
[field:textlink /] - [field:softtype /]<br />
{/dede:arclist}
底层模板字段：
ID(同 id),typeid,sortrank,flag,ismake,channel,arcrank,click,money,title,shorttitle,color,writer,
source,litpic(同picname),pubdate,senddate,mid, lastpost,scores,goodpost,badpost,notpost,
description(同infos),filename, image, imglink, fulltitle, textlink, typelink,plusurl, memberurl, templeturl,
stime(pubdate 的"0000-00-00"格式)
其中：
textlink = <a href='arcurl'>title</a>
typelink = <a href='typeurl'>typename</a>
imglink = <a href='arcurl'><img src='picname' border='0' width='imgwidth' height='imgheight'></a>
image = <img src='picname' border='0' width='imgwidth' height='imgheight' alt=’titile’>
字段调用方法：[field:varname/]
如：
{dede:arclist infolen='100'}
[field:textlink/]
<br>
[field:infos/]
<br>
{/dede:arclist}
注：底层模板里的Field实现也是织梦标记的一种形式，因此支持使用PHP语法，Function扩展等功能。
如： 给当天发布的内容加上 (new) 标志
[field:senddate runphp='yes']
$ntime = time();
$oneday = 3600 24;
if(($ntime - @me)<$oneday) @me = "<font color='red'>(new)</font>";
else @me = "";
[/field:senddate]
通过对li进行单独控制;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
wholedata {
width:300px; height:22px; border-bottom:1px #C3C3C3 dashed;
}
wholedata ul {
padding:0px; margin:0px; border:0px; list-style:none;
}
wholedata li {
width:50px; height:22px; float:left; line-height:22px; color:#454545; font-size:12px;
}
wholedata lipa{background-color:red;width:50px;}
</style>
</head>
<body>
<div class="wholedata">
<ul>
<li class="pa">标题</li>
<li>姓名</li>
<li>地址</li>
<li>黑龙江</li>
<li>互联网</li>
<li>13</li>
</ul>
</div>
</body>
wholedata lipa{background-color:red;width:50px;}
<li class="pa">标题</li>
jquery获取img宽高的操作方法和步骤如下：
1、首先，界面中有一个img，但是js不用于设置其宽度，高度和背景颜色，如下图所示。
2、其次，使用jQuery获取要设置的div，然后调用css（）方法即可开始设置，如下图所示。
3、接着，可以在css方法中设置。需要注意的是，里面有大括号，并且该属性用双引号引起来，如下图所示。
4、然后，完成上述步骤后，要同时设置多个属性，请使用逗号分隔多个属性，如下图所示。
5、随后，完成上述步骤后，打开hbuilder上方的浏览器小图标并开始预览，如下图所示。
6、最后，完成上述步骤后，观看效果，如下图所示。这样，问题就解决了。
修改arclist标签的asc属性。
具体代码如下：
{dede:arclistorderway=''asc'}
文章按照顺序排列
{/dede:arclist}
解析原因：
orderway=''值为desc或asc，指定排序方式是降序还是顺向排序，将值修改asc就是顺序排列。
扩展资料
其他属性
1、typeid=''表示栏目ID，在列表模板和档案模板中一般不需要指定，在封面模板中允许用","分开表示多个栏目；
2、row=''表示返回文档列表总数；
3、col=''表示分多少列显示（默认为单列）；
4、titlelen=''表示标题长度；
5、infolen=''表示内容简介长度；
6、imgwidth=''表示缩略图宽度；
7、imgheight=''表示缩略图高度；
8、type=''表示档案类型，其中空值、不使用这个属性或type='all'时为普通文档
参考资料：
日常项目中，后端传图不规则，比例大小不一。前端又要去做适应，是一个让人非常头大的问题。
总结了一个不规则不变形的解决方案：
注：先写一个长 300px 宽 200px 带边框的 div ，接近方形，实现正常显示不变形。
通过背景图的 background-position 属性，可以使居中显示。国外一些网站有看到类似的案例，简单好操作。
这样可以显示完整的，不变形：
若要填满容器，可以将 background-size 属性改为 100% auto ：
如下图：
同样 background-size 的 contain （完整显示）和 cover （填充）属性也能起到相同的效果。
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框，不支持IE。
可用属性：
fill 不保持纵横比缩放，使完全适应
contain 保持纵横比缩放，使的长边能完全显示出来
cover 保持纵横比缩放，只保证的短边能完全显示出来
none 保持宽高不变
scale-down 当实际宽高小于所设置的宽高时，显示效果与none一致；否则，显示效果与contain一致
inherit 继承
initial 默认值
unset 继承父元素，若父元素没有属性则显示默认值
CSS：
该方法也可以实现以上两种方法的效果。
以容器宽 200px 高 300px ，为方形为例：
设置 width: 100% 为完整显示，多出部分留白。
设置 height: 100%; 为全部填充，这时候需要给的容器添加 overflow: hidden; 属性，防止超出。
等比例缩放，多余部分，还有就是要考虑IE兼容问题，可以在手机端项目中使用。
js 方法应该比较通用，可以兼容多版本浏览器。
也可以兼容多版本浏览器，需要 jQuery 加持。
等比例缩放，多余部分空白填补：
img固定宽度和高度，不规则变形问题的解决方法-HTML笔记-w3h5-Web前端开发资源网
1、首先在编辑器建立了一个静态页面，在body中添加两个div，设置宽度，并设class 为div1和div2，在两个div的class 中添加相同的控制的class名为了 ”img“，并为div添加控制宽度的样式：
2、在两个div中加入相同的， 这个时候需要在img 类中加入css语句设置一下div的高度和宽度，以及div的边框，然后就可以设置img的样式了：
3、最后设置img的样式中的高度为auto，宽度为100%，这样就可以自适应浏览器了，来到浏览器，可以看到设置了自适应的自动填满整个div了，而没有设置的则是填充了一部分。以上就是让div自动适应自身的img高度：
0条评论