如何一个td或table里的图片等比例缩小(css问题)图片自动缩放

网上说了一大堆,说什么设置div的宽度,特别是这篇:

http://www.divcss5.com/wenji/w632.shtml

害死人,我们为什么要自动缩放?还不是手机屏幕太多分辨率了?你指定了宽度还怎么缩放?你妹的。

经过我的多次实验,发现一个比较好的方法, 在ios微信/浏览器和android微信/浏览器都可以完美显示,那就是:

1、div不做要求,内容居中就好了

2、放一个table进去,table的width=100%,这是最关键的

3、在td放一个img,img的max-width:100%;

这就OK了!

附一个样式表:

table {

width: 100%;

margin:0 auto;

background: #2d2d2d; /* browsers that don‘t support rgba  */

background: rgba(45,45,45,.15);

font-family: ‘PT Sans‘, Helvetica, Arial, sans-serif;

font-size: 20px;

/*color: #0; 不能用1个0 */

border: none;

border-collapse: collapse;

text-shadow: 0 1px 2px rgba(0,0,0,.3);

}

td{

/* max-width:100%; Mozilla才支持一个max-width 的CSS语法 */

background: #ffffff;

border: none; /*solid #000 1px;*/

vertical-align:center;

text-align:center;

color: #000;

}

/* 分享页面图片自动缩放设备屏幕宽度 */

img.sharepage{

max-width:100%;

}

时间: 2025-01-13 08:43:59

如何一个td或table里的图片等比例缩小(css问题)图片自动缩放的相关文章

[VB] 图片等比例缩小方法

摘要:[VB] 图片等比例缩小方法 将图片等比例缩小的方法 '设定图片长宽 Public Sub setImageWH() Try '图片位置 Dim FilePath As String = "~/Images/Img.png" '取得图片真实路径 Dim realPath As String = HttpContext.Current.Request.MapPath(FilePath) ' Dim ImgDw As System.Drawing.Image = System.Dra

利用javascript设置图片等比例缩小

网站的内容页面,经常要放图片,如果图片太大会撑出,影响页面美观.如果只是用css限 制图片的最大宽度,会引起图片的变形,本文建议还是用js来实现,实现方式如下: <script language="javascript" type="text/javascript"> window.onload = function () { //判断图片大小,超过一定宽度,要通过js定义图片大小 $.each($(".sec-content img"

div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)

在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决?CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决. 解决方法有两种: 第一种,让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形. 比如淘宝,要求店铺主上传

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

点击table中的某一个td,获得这个tr的所有数据

功能: 点击table中的某一个td,获得这个tr的所有数据 效果图 <html> <head> <script> function getData2(element){ document.getElementById("name").value=element.children[0].innerHTML; document.getElementById("xuehao").value=element.children[1].in

django模板里循环变量&lt;table&gt;里想要两个一行如何控制

2016-8-3 周三 做项目时遇到的问题: 每个div由循环变量输出: {% for key,value in formextenddetail %} <div id="div_id_notes" class="value form-group row"> <div class="control-label">{{ key }}</div> <div class="controls"

Table里嵌套ASPXGridView

Table里嵌套ASPXGridView 简述 有时候我们在录入数据的时候,因为录入数据字段比较少,所以可以直接在GridView上录入. 但是我们有些公用字段是在单头中固定的,GridView显示的是单身. 这样为了方便我们把GridView嵌套在Table中,录入数据时就可以取到单头上的数据. 也可以根据单头来检索同类数据,编辑数据也可在GridView上操作. ASPXGridView 这边在GridView是选择了DevExpress控件里的ASPXGridView. 这个第三方控件是美

Qlikview Data Modeling---创建一个Key/Link Table

这一篇我们将来学习下在什么情况下需要在QlikView里创建一个Key或者Link Table来避免事实表loops 和 qlikview自动产生synthetic keys.当两个事实表共享同样的键集合的时候,concatenation应该是首选方案去避免qlikview自动的创建synthetic key. 然而,如果一个事实表的比另外一个事实表的key键多,而且多出的key键值和另外一个事实表没有关联,这个时候创建一个key table去连接这些键值的方案就更加适合. In this

关于table里的数据太长超出列宽时,不换行,出省略号,鼠标移上去以后显示全部数据

#t1{ table-layout:fixed; } #t1 td{ text-overflow:ellipsis; overflow:hidden; white-space: nowrap; } 上面是css 1 <table width="670" align="center" border="0" cellpadding="0" cellspacing="0" class="tyouh