图像自动高度缩放宽度

我有在宽度上，我伸展宽度以适应集装箱较小某些图像，但是希望hieght扩大规模为好，在此先感谢，菲尔图像自动高度缩放宽度

2014-09-04 P Clegg

代替CSS方法的，可以计算出原始的宽高比，然后，从宽度动态计算投射高度.. – ne1410s 2014-09-04 21:19:22

请包括更多的代码下次。 – 2014-09-04 21:20:46

我用一个YouTube视频做了这个，使用浏览器和宽度来调整高度。你能适应它的任何东西，但可能有点矫枉过正：https://gist.github.com/dcondrey/647fcdda17cd23715872 – davidcondrey 2014-09-04 21:30:10

有没有需要指定的高度。

看看我的例子，这是我的jsfiddle

这里是HTML

<div class="ele"> 
    <img src="http://viralstash.net/wp-content/uploads/2014/03/521013543_1385596410.jpg" border="0" /> 
</div>

这里是CSS

.ele { 
    outline: red solid 1px; 
    width: 250px; 
} 
.ele img { 
    width: 100%; 
    display: block; 
}

如果您控制父元素的宽度，只需使用with，则无需担心图像的宽度和高度值。

图像它自会使用父母的大小设置它的宽度，默认情况下，高度值将是成正比的宽度，所以没有必要在所有指定高度值，即使不在父。

2014-09-04 21:25:42 Allan

对不起，图像高度仍然没有自动调整大小仅宽度 – 2014-09-04 21:41:31

你检查我的jsfiddle，其工作在那里，用它玩，你会看到。也许是你的来源。也许你应该发布迄今在jsfiddle上的CSS和HTML。 – Allan 2014-09-04 21:44:14

是的，感谢您的例子，但是图像本身是比任何代码的高度和宽度，我想要做的是放大图像，以适应宽度，而且还会自动放大的高度与宽度的比例相同，谢谢。 – 2014-09-05 12:23:47

在你css：

img { 
    width: 100%; 
    height: auto !important; 
}

CSS自然可以处理这个问题。图像将自动占用其容器宽度的100％，高度将按比例调整。

2014-09-04 21:11:46

试过这种方法，宽度将非常合适，但高度不会按比例放大：/谢谢。 – 2014-09-04 21:14:40

请用示例代码创建一个小提琴或codepen，以便我可以调试。你有CSS冲突，因为这是一个非常基本的CSS事情。 – 2014-09-04 21:15:15

确保添加！important重要声明（height：auto！important;）以确保跨浏览器的兼容性（特别是较旧的broswers，即6,7等）。 – iammikerodriguez 2014-09-04 21:16:57

回答