html - 如何以百分比正确设置高度和宽度？

Question

我需要在它旁边显示一个图片和文字，但问题是图片太大，我需要通过设置自定义width和来缩小它height。

CSS：

#list{
    max-height:200px;
    overflow-y:auto;
    padding:5px;
    /*display: none;*/
}

.info{
    border: 1px dashed #CCCCCC;
    margin-bottom: 5px;
    padding:0 5px;
    overflow: hidden;
    cursor: pointer;
}

.info .image{
    width:20%;
    height:30%;
    display:inline-block;
    margin-right:20px
}

.info .image img{
    width: 100%;
    height: 100%;
}

.info .text_data{
    display: inline-block;
}

HTML：

<div id="list" class="select_block">
    <div class="info">
        <div class="image">
            <img src="https://dl.dropbox.com/u/14396564/screens/screenshot.jpg">
        </div>
        <div class="text_data">
            <p>
                Name: Some name
                <br />
                Start: 2012-05-17 04:43:40
                <br />
                End: 2012-05-17 04:43:40
            </p>
        </div>
    </div>
</div>

http://jsfiddle.net/nonamez/e5hyX/

在 Firefox 中就像

在 Safari 中（可能在 chrome 中是相同的）

所以我需要这样的东西（悬停在图片上以全尺寸显示，所以我只需要一个预览列表，但带有百分比）。

Answer 1

如果您只设置高度或宽度，浏览器将按比例缩放图像的自然尺寸。如果您需要确保它位于给定区域内，请确保使用max-*属性。例如：

width:50%;
max-width:100px;
max-height:80px;