2

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

我有一个容器内的图像（请参阅 jsFiddle 中的#slider-section），它具有流体高度和固定的最大高度。

我已将图像的最大高度和最大宽度设置为 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 回答