css中图片如何自适应高度
<!DOCTYPEhtml><html><head><style>#container{width:1050px;height:106px;background:red;...
<!DOCTYPE html>
<html>
<head>
<style>
#container {width:1050px; height:106px;background:red;}
#image {background-image:url('logo.png');height:106px;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<div id="container">
<div id="image">
</div>
</div>
</body>
</html>
问题：
我的图片大小是1624*174, 我想让图片自适应高度，即如果#container高度是106px,那么我的图片大小变成989*106, 如果#container高度是200px, 那么我的图片大小变成1866*200, 即图片高度总是和#container高度一致，图片的长宽成比例放大缩小，这要怎么实现？ 展开
<html>
<head>
<style>
#container {width:1050px; height:106px;background:red;}
#image {background-image:url('logo.png');height:106px;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<div id="container">
<div id="image">
</div>
</div>
</body>
</html>
问题：
我的图片大小是1624*174, 我想让图片自适应高度，即如果#container高度是106px,那么我的图片大小变成989*106, 如果#container高度是200px, 那么我的图片大小变成1866*200, 即图片高度总是和#container高度一致，图片的长宽成比例放大缩小，这要怎么实现？ 展开
6个回答
展开全部
1. 在编写网页时,如果图片大小事先是未知的,如果图片过大的话,会影响的网页中其他块的结构
使用css可以将图片的大小调整到一个固定的值
<span style="font-size: 16px;">#mian img{
max-width:170px;
width:170px;
width:expression(document.body.clientWidth>170?"170px":"auto");
max-height:180px;
height:180px;
height:expression(document.body.clientWidth>180?"180px":"auto");
overflow:hidden;
}
</span>
2.html代码中
如果图片的大小是事先未知的,这样设置可以使,图像的大小固定,从而不影响网页中其他块的结构
<span style="font-size: 16px;"><div id = "maim">
<!--
在mian样式的块中img标签图片的大小会被固定在170px*180px
-->
<img src="01.jpg">
</div>
</span>
使用css可以将图片的大小调整到一个固定的值
<span style="font-size: 16px;">#mian img{
max-width:170px;
width:170px;
width:expression(document.body.clientWidth>170?"170px":"auto");
max-height:180px;
height:180px;
height:expression(document.body.clientWidth>180?"180px":"auto");
overflow:hidden;
}
</span>
2.html代码中
如果图片的大小是事先未知的,这样设置可以使,图像的大小固定,从而不影响网页中其他块的结构
<span style="font-size: 16px;"><div id = "maim">
<!--
在mian样式的块中img标签图片的大小会被固定在170px*180px
-->
<img src="01.jpg">
</div>
</span>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div id="container" style="height: 106px;">
<img src="logo.png" style="height: 100%;" />
</div>
这就行了，不能用背景图，背景图是不允许改变大小的。如果想将图片当背景用，可以再加上下面的内容
<div id="container2" style="height: 106px; margin-top: -106px;">Content</div>
追问
我要用背景图的方式，完整的代码是什么？
追答
答案中不是说了么，背景图是不能自适应的，只有img元素可以自适应。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在布局页面时，有时会遇到大图片将页面容器“撑破”的情况，尤其是加载外链图片（通常是通过采集的外站的图片）。那么本文将为您讲述使用jQuery如何按比例缩放大图片，让大图片自适应页面布局。详细代码你直接看下这个吧，http://www.xiamiz.com/a/jiaocheng/2013/0429/108515.html jQuery实现等比例缩放大图片让大图片自适应页面布局
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
调整时设置width值为想要的值，height值设置成auto
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以在div层上面加一个DIV浮动层，然后使用javascript来控制他们的大小。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
