1

写真とその横にテキストを表示する必要がありますが、問題は写真が大きすぎることで、カスタム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でも同じです）
サファリ

したがって、このようなものが必要です（写真にカーソルを合わせるとフルサイズで表示されるため、プレビューのリストのみが必要ですが、パーセンテージが必要です）。

必要

4

1 に答える 1

3

高さまたは幅のみを設定した場合、ブラウザーは画像をその自然な寸法に比例して拡大縮小します。特定の領域内に収まるようにする必要がある場合は、必ずmax-*プロパティを使用してください。例えば：

width:50%;
max-width:100px;
max-height:80px;
于 2013-01-22T19:31:51.063 に答える