2

例: http://jsfiddle.net/vjqjv/7/

流動的な高さと固定の最大高さを持つコンテナー (jsFiddle の #slider-section を参照) 内に画像があります。

画像の max-height と max-width を 100% に設定しました (#slider-img を参照)。

問題: ブラウザー ウィンドウが特定の幅を超えると、画像は max-width と max-height の設定を無視し、コンテナーよりも大きくなります。

jsFiddleを開いてブラウザの横幅を広げてみるとわかります。

目標は、画像がコンテナーの幅と高さを決して超えないようにし、縦横比を維持することです。

これは、コンテナー (#slider-section) に固定の高さを与えることで実現できます。ただし、これは流体の高さである必要があるため、私にとって可能な解決策ではありません。

誰にも解決策がありますか？

4

1 に答える 1

0

これはあなたが必要とするものですか？ http://jsfiddle.net/vjqjv/10/

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <title>test</title>
</head>

<body>
    <section id="slider-section" class="clearfix">
        <div id="slider-img-container">
            <img id="slider-img" src="http://s1.directupload.net/images/120715/jy5nvhce.png" alt=""/></div>
        <div id="slider-div-remaining" class="slider-div">
            <div>
                <h1>empfang</h1>
                <p>Der Empfangsbereich - weil es für den ersten Eindruck keine zweite Chance gibt!</p>
            </div>
        </div>
    </section>
</body>
</html>​

CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none outside none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a
{
    text-decoration: none;
    color: black;
}
html, body 
{
    height: 100%; 
    width: 100%; 
    margin: 0; 
}
#slider-section
{
    height: 58.3658%;
}
#slider-img-container
{
    float: left;
    height: 100%;
    margin-right:5px;
}
#slider-img
{
    max-height: 100%;
    display: block;
    max-width:100%;
}

.clearfix::after {
clear: both;
}
.clearfix::before, .clearfix::after {
content: "";
display: table;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
}
​
于 2012-07-15T11:46:23.887 に答える