手机自适应! 图片如何适应图片大小

[tomorrow93]

我想要的效果：无论后台传多大的图片，都会正常显示，下图是原型设计稿



我遇到的问题：遇到不一样尺寸图片，高度会不一样



我的HTML：

	<div>
		<div class="InList_left">
			<img src="img/logo.jpg">
		</div>
		<div class="clearfix"></div>
	</div>

我的CSS：

.InList_left
{
	width: 30%;
	border: 1px solid #f4f3f3;
	float: left;
}
.InList_left img
{
	width: 100%;
}

大神们这个问题如何解决啊，怎样才能适应不同尺寸的图片

[daswcszxw]

.InList_left
{
//这个盒子的宽高用EM。
}
.InList_left img
{
    width: 100%;
height:100%
}

[tomorrow93]

教父你好，为什么用em而不用div呢？

[tomorrow93]

引用 3 楼 yanluofeihong 的回复:

[quote=引用 2 楼 tomorrow93 的回复:] 不行啊 没变化

.InList_left
{
    width: 30%;
    border: 1px solid #f4f3f3;
    float: left;
   height：30%;//根据需要把高度调整为合适的，图片的大小就设置为width：100%；height：100%；
}
.InList_left img
{
    width: 100%;
}

[/quote] 还是不行，不同尺寸图片下 高度还是不一致。

[看着是个昵称]

引用 6 楼 tomorrow93 的回复:

[quote=引用 3 楼 yanluofeihong 的回复:] [quote=引用 2 楼 tomorrow93 的回复:] 不行啊 没变化

.InList_left
{
    width: 30%;
    border: 1px solid #f4f3f3;
    float: left;
   height：30%;//根据需要把高度调整为合适的，图片的大小就设置为width：100%；height：100%；
}
.InList_left img
{
    width: 100%;
}

[/quote] 还是不行，不同尺寸图片下 高度还是不一致。[/quote] 使用rem单位吧

[看着是个昵称]

需要把高度设置为100%；或者设置为auto

[tomorrow93]

不行啊 没变化

[看着是个昵称]

引用 2 楼 tomorrow93 的回复:

不行啊 没变化

.InList_left
{
    width: 30%;
    border: 1px solid #f4f3f3;
    float: left;
   height：30%;//根据需要把高度调整为合适的，图片的大小就设置为width：100%；height：100%；
}
.InList_left img
{
    width: 100%;
}

[qq_14875589]

.InList_left { width: 30%; border: 1px solid #f4f3f3; float: left; height：150px; //指定高度 } .InList_left img { width: 100%; height: 150px; //指定同样的高度 } //以上当图片过大时会压缩图片，若不想这样，可以用css3的transion:translate 让图片居中显示 //也可以给父div固定的高，再让图片相对 父div绝对定位，在img的css中加上width:100%; height:100%;即可。