CSS最大高度/寬度100％溢出

我在div中有圖像，並且有一些css將所有東西都分開，但是我遇到了一個問題，主圖像溢出了視口之外（圖像被切斷在窗口的邊緣），即使我有CSS最大高度/寬度100％溢出

img{max-height: 100%; 
    max-width : 100%;}

目前，最大高度：100％填充的高度，最大寬度：取決於尺寸溢出（或反之亦然）100％的原因。我想它，使圖像填充寬度或高度，取其較小者，第一

參見： ~~http://jsfiddle.net/P32r8/~~ http://jsfiddle.net/P32r8/7/

更新：圖片！目前正在做第一個，我希望做第二個。 What it's doing

What I'd like it to do

來源

2013-07-08 Eric Wolf

您是否想讓圖像從視口的左上角開始？ – Marty

是的。我的佈局是從左到右，導航是在左側，圖像（如小提琴），然後是主圖像。一切都使用像素邊距，除了主圖像，應該佔用其餘的可用空間，如果可能的話，沒有溢出 –

因此，在導航和圖像列表被考慮在視口的左上方 –

在你的CSS你寫

第三屆編輯現在嘿嘿

我改寫了一些地區最爲明顯的是nav http://jsfiddle.net/CRjf7/

來源

2013-07-08 00:44:14

問題那就是我需要#content margin-left來讓我的內容不會運行到左側的導航欄中。另外，我希望每個＃內容img的邊距都是5px，那麼爲什麼我要改變它呢？ –

看着你的新jsfiddle貓的剪輯是由你的overflow-x：auto引起的; –

我剛剛嘗試刪除，目前沒有效果 –

去除position:fixed;的更新

我不得不重做大部分代碼才能正常工作。

演示：http://jsfiddle.net/P32r8/30/

HTML：

<nav> 
    <h1>H1</h1> 
    <ul> 
     <li><a href="#">Link</a> 
     </li> 
     <li><a href="#">Link</a> 
     </li> 
     <li><a href="#">Link</a> 
     </li> 
     <li><a href="#">Link</a> 
     </li> 
     <li><a href="#">Link</a> 
     </li> 
     <li><a href="#">Link</a> 
     </li> 
    </ul> 
</nav> 


<div id="content"> 
    <div id="imagesContainer"> 
     <img id="1" src="http://placekitten.com/g/5000/" /> 
     <img id="2" src="http://placekitten.com/g/5000/?hello" /> 
     <img id="3" src="http://placekitten.com/g/5000/" /> 
     <img id="4" src="http://placekitten.com/g/5000/" /> 
     <img id="5" src="http://placekitten.com/g/5000/" /> 
     <img id="6" src="http://placekitten.com/g/5000/" /> 
     <img id="7" src="http://placekitten.com/g/5000/" /> 
    </div> 
    <div id="loader"> 
     <img src="" alt="" /> 
    </div> 
</div>

CSS：

nav { 
    position: fixed; 
    width: 200px; 
    margin-left: 25px; 
    padding-left: 0; 
    float: left; 
    height: 99%; 
    overflow-y: auto; 
    border-right: solid; 
} 
nav ul { 
    margin-top: -50px; 
    padding: 0; 
    list-style-type: none; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: medium; 
} 
nav li#current a { 
    font-weight: bold !important; 
    margin-left: 50px; 
    width: 150px !important; 
} 
nav li#current a { 
    background-color: #EEE; 
} 
nav li#home a { 
    float: none; 
} 
nav a { 
    display: block; 
    background-color: #BBB; 
    width: 200px; 
    padding: 1em 0 1em 0; 
    margin-bottom: .5em; 
    text-align: center; 
    text-decoration: none; 
    color: #000; 
} 
nav a:hover { 
    background-color: #CCC; 
} 
h1 { 
    font-size: 6em; 
    color: rgb(0, 0, 0); 
    margin-top: -0px; 
} 

#content { 
    margin-left: 230px; 
    overflow:hidden; 
    max-width:960px; 
    width:55%; 
    float:left; 
    border:1px solid red; 
} 
#imagesContainer{ 
    float:left; 
    overflow:hidden; 
    max-width:170px; 
    width:37%; 
} 

#imagesContainer > img { 
    margin: 0; 
    height: auto; 
    width: 100%; 
    display: block; 
    vertical-align: bottom; 
    filter: grayscale(100%); 
    -webkit-filter: grayscale(100%); 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    /* Firefox 3.5+ */ 

} 
div#content img.clicked { 
    margin: 0px; 
    margin-left: 210px !important; 
    max-height: 100%; 
    max-width: 100%; 
    width: auto; 
    height: auto; 
    -webkit-filter: none; 
    position: fixed; 
    top: 0px; 
} 

#loader { 
    float:right; 
    width:58%; 
    max-width:200px; 
    overflow:hidden; 
    border:1px solid blue; 
    position:relative; 
} 

#loader img { 
    width:99%; 
}

jQuery的

$(document).ready(function() { 

    var loader = $('#loader'), 
     imgDiv = $('#imagesContainer'); 

    loader.height(loader.parent().height()); // sets loader to parent height 

    imgDiv.find('img').on('click', function() { 
     var getSrc = $(this).attr('src'); 
     console.log(getSrc); 
     loader.find('img').attr('src', getSrc); 
    }); 


});

來源

2013-07-08 00:47:25 Shivam

以下是包含我的導航的更新的jsfiddle：http://jsfiddle.net/P32r8/7/ –

I我喜歡將圖像放大到最大寬度：100％或最大高度：100％，而不會溢出。即如果最大高度：100％達到邊緣，最大寬度流過邊緣，我希望它不會那樣做 –

照片真的幫助:)，我更新了我的文章的jsFiddle。讓我知道，如果這是你在找什麼。 – Shivam

我在CSS中添加以下代碼：

div#image-space { 
    width: 100%; 
    height: 100px; 
    padding: 0; 
    margin: 0; 
} 
nav { 
    width: 30%; 
    float: left; 
} 
div#content { 
    float: left; 
} 
div#content img.clicked { 
    width: 50%; 
    float: left; 
}

和容器空白是你想要的嗎？ http://jsfiddle.net/P32r8/19/

來源

2013-07-08 02:03:44 Joey

CSS最大高度/寬度100％溢出

回答

相關問題