html代码img图片为什么总是第一次显示很小啊?高分求。。。
什么原因啊？我在wp博客插入一个很大的图片的时候，总是第一次打开很小啊!然后刷新下就会大了！我平时用的图片格式是这样<imgsrc="URL.jpg"/>我上传的图片大小...
什么原因啊？我在wp博客插入一个很大的图片的时候，总是第一次打开很小啊!然后刷新下就会大了！我平时用的图片格式是这样 <img src="URL.jpg"/>
我上传的图片大小不一样的，平时不爱添加图片属性大小，因为我上传的图片比较多，也没空整理。如果是属性大小问题的话，麻烦大家提供个这样的代码，自动根据文章页面大小显示，谢谢了！！ 展开
我上传的图片大小不一样的，平时不爱添加图片属性大小，因为我上传的图片比较多，也没空整理。如果是属性大小问题的话，麻烦大家提供个这样的代码，自动根据文章页面大小显示，谢谢了！！ 展开
4个回答
展开全部
这位朋友你好，其实你说的这个情况可以给img统一加一个样式就可以了，不用挨个加。在title下面加入下面的代码:
<style type="text/css">
img{ height:300px; width:300px;}
</style>
这样就可以给所有的img图片统一设置成宽和高都是300像素了。
还有网页最好不好让图片什么的根据页面大小变化，那样如果你把页面缩小到很小那么照片也随之缩小那就看不到了。
还有种方法就是给你想变化宽和高的图片都加上class属性，如：
<img class=“img” src="URL.jpg"/>。
那么你就可以这样写
<style type="text/css">
.img{ height:300px; width:300px;}
</style>
这是只给class是“img”的照片变化宽和高。
希望可以帮到你……
<style type="text/css">
img{ height:300px; width:300px;}
</style>
这样就可以给所有的img图片统一设置成宽和高都是300像素了。
还有网页最好不好让图片什么的根据页面大小变化，那样如果你把页面缩小到很小那么照片也随之缩小那就看不到了。
还有种方法就是给你想变化宽和高的图片都加上class属性，如：
<img class=“img” src="URL.jpg"/>。
那么你就可以这样写
<style type="text/css">
.img{ height:300px; width:300px;}
</style>
这是只给class是“img”的照片变化宽和高。
希望可以帮到你……
更多追问追答
追问
哥们，问下
如果上传图片是10像素的，也会被放大300吗？
如果那样的话，就走形了哎！！
追答
恩，我就是担心你这个问题，你上传的照片如果很小，一放大肯定会失真。最好是找些大图片比较好。因为html里没有不让图片变大不失真的功能呢。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script language="javascript">
function init()
{
RsizeAllImageById("imgProductItem", 150, 150);
}
//将页面内所有指定id的图片按比例缩放
function RsizeAllImageById(id, W, H)
{
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++)
{
if(imgs[i].id == id)
{
ResizeImage(imgs[i], W, H);
}
}
}
function ResizeImage(imageDest, W, H)
{
//显示框宽度W,高度H
var image = new Image();
image.src = imageDest.src;
if(image.width>0 && image.height>0)
{
//比较纵横比
if(image.width/image.height >= W/H)//相对显示框：宽>高
{
if(image.width > W) //宽度大于显示框宽度W，应压缩高度
{
imageDest.width = W;
imageDest.height = (image.height*W)/image.width;
}
else //宽度少于或等于显示框宽度W，图片完全显示
{
imageDest.width = image.width;
imageDest.height = image.height;
}
}
else//同理
{
if(image.height > H)
{
imageDest.height = H;
imageDest.width = (image.width*H)/image.height;
}
else
{
imageDest.width = image.width;
imageDest.height = image.height;
}
}
}
}
</script>
调用<BODY onload="javascript:init();">
<img style="cursor:pointer" height="150" width="150" id="imgProductItem" name="imgProductItem">
function init()
{
RsizeAllImageById("imgProductItem", 150, 150);
}
//将页面内所有指定id的图片按比例缩放
function RsizeAllImageById(id, W, H)
{
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++)
{
if(imgs[i].id == id)
{
ResizeImage(imgs[i], W, H);
}
}
}
function ResizeImage(imageDest, W, H)
{
//显示框宽度W,高度H
var image = new Image();
image.src = imageDest.src;
if(image.width>0 && image.height>0)
{
//比较纵横比
if(image.width/image.height >= W/H)//相对显示框：宽>高
{
if(image.width > W) //宽度大于显示框宽度W，应压缩高度
{
imageDest.width = W;
imageDest.height = (image.height*W)/image.width;
}
else //宽度少于或等于显示框宽度W，图片完全显示
{
imageDest.width = image.width;
imageDest.height = image.height;
}
}
else//同理
{
if(image.height > H)
{
imageDest.height = H;
imageDest.width = (image.width*H)/image.height;
}
else
{
imageDest.width = image.width;
imageDest.height = image.height;
}
}
}
}
</script>
调用<BODY onload="javascript:init();">
<img style="cursor:pointer" height="150" width="150" id="imgProductItem" name="imgProductItem">
更多追问追答
追问
好复杂哦！能不能用最简单的方法 说下哦！因为我是菜鸟哦！不懂哦
追答
自动根据文章页面大小显示 就没有简单的方法，除非图都一样大，可以用css自动控制，但是如果有小图和大图，就没法控制了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
img
{
max-width: 126px;
max-height: 100px;
width: expression(width>126?"126px":width+"px");
height: expression(height>100?"100px":height+"px");
vertical-align: middle;
}
定义最大宽度，最大高度的css样式
超出按图片比例自动缩放
{
max-width: 126px;
max-height: 100px;
width: expression(width>126?"126px":width+"px");
height: expression(height>100?"100px":height+"px");
vertical-align: middle;
}
定义最大宽度，最大高度的css样式
超出按图片比例自动缩放
追问
哥们！图片仍然很小啊！问下如果设置最小不能小于多少设置写啊？
若图片宽度低于100就显示100
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
加入[M][url=][img,图片长,图片宽]图片地址[/img][/url][/M]
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
