CSS圖像擴展到父div大小

標題說大部分。我的HTML：CSS圖像擴展到父div大小

<div class="wrap"> 
<div class="s-inner"> 
    <figure> 
    <img> 
    </figure> 
</div> 
</div>

CSS：

.wrap{ 
max-width:500px; 
max-height:200px; 
background:red; 
} 
.s-inner{ 
position: relative; 
margin: inherit; 
padding:inherit; 
display: -webkit-flex; 
display: flex; 
max-height: 100%; 
max-width: 100%; 
box-sizing:inherit; 
margin:auto; 
} 
/*   Inside    */ 
.s-inner > figure{ 
    display: block; 
    margin: 0 auto 0 auto; 
    box-sizing: border-box; 
} 
    .s-inner > figure > img{ 
    box-sizing: border-box; 
    max-width: 100%; 
    max-height: 100%; 
}

如果檢查.wrap格，你會發現圖像彈出和比股利，怎麼說來固定圖像放大縮放.wrap div大小。 Fiddle

來源

2016-02-29 August

所以呢？這是默認行爲。如果你不希望你可以通過增加「overflow」來「隱藏」隱藏「，或者您可以使圖像具有百分比高度。 – Aziz

考慮CSS **'object-fit' **屬性：http://stackoverflow.com/a/34301817/3597276 –

@Michael_B我不想使用它，因爲它不受IE和Edge支持 – August

當你的圖像比分割大的時候..圖像不能適應它。所以你必須設置寬度和高度的圖像也

.s-inner > figure > img { 
    height: 196px; 
    box-sizing: border-box; 
    max-width: 100%; 
    max-height: 100%; 
    width: 500px; 
     }

或響應方式

.s-inner > figure > img { 
height: 100%; 
box-sizing: border-box; 
max-width: 100%; 
max-height: 100%; 
width: 100%; 
}

來源

2016-02-29 15:35:39

你div.wrap元素的寬度和高度分別設置爲500px和200px。該寬度和高度的縱橫比是5:2。另一方面，您的圖像的分辨率爲2048x1376，其高寬比爲64:43。如果我們縮小它，我們得到5:3.35。

當您比較兩個長寬比5:2和5:3.35時，您會看到圖像比div.wrap元素高。

我能想到的三種不同的方法可以解決這個

首先，你可以拉伸圖像以適合：JSFiddle

.wrap { 
    width: 500px; 
    height: 200px; 
    background: red; 
} 
.wrap * { 
    width: 100%; 
    height: 100%; 
}

其次，在保持寬高比適合圖像：JSFiddle

.s-inner > figure > img { 
    box-sizing: border-box; 
    max-width: 100%; 
    max-height: 100%; 
    height: 200px; // add height of the .wrap 
}

三，你隱藏圖像的溢出部分，並重新定位圖像：JSFiddle

.wrap { 
    max-width: 500px; 
    max-height: 200px; 
    background: red; 
    overflow: hidden; // hide overflow 
} 
.s-inner > figure > img { 
    box-sizing: border-box; 
    max-width: 100%; 
    max-height: 100%; 
    margin-top: calc(-335.938px + 200px); // reposition the image 
}

來源

2016-02-29 16:05:27 akinuri

嘗試添加overflow: hidden您wrap股利和width: 100%;子的div。

CSS：

.wrap{ 
    max-width:500px; 
    max-height:200px; 
    background:red; 
    overflow: hidden; 
} 
.s-inner{ 
    position: relative; 
    display: -webkit-flex; 
    display: flex; 
    height: auto; 
    width: 100%; 
    box-sizing:inherit; 
    margin:auto; 
    } 
/*   Inside    */ 
    .s-inner > figure{ 
     display: block; 
     margin: 0 auto 0 auto; 
     box-sizing: border-box; 
    } 
     .s-inner > figure > img{ 
     box-sizing: border-box; 
     width: 100%; 
     height: auto; 
    }

小提琴：https://jsfiddle.net/3uvpt3ta/7/

來源

2016-02-29 16:06:19 DebRaj

本演示展示了.warp元素不被它的「形象」擴大了「圖像」，但溢出。主要的變化是：

新增默認樣式
.wrap是display: table
.s-inner是display: table-cell
.s-inner去除flex性能
的<img>被刪除。
圖像0現在已分配給figurebackground-image
background-size: contain加到figure爲好。這與object: fit類似。值爲contain時，圖像不會被剪切，也不會在調整大小時發生扭曲。實際上它試圖保持它的原始比例。
figure是100vw x 100vh，基本上如果不包含，它將從水平和垂直屏幕的一邊擴展到另一邊。
添加了標題和圖標，因爲它看起來不錯。
嘗試調整它的大小，它是響應式的，但核心元素（<body>中的那些）不完全依賴百分比長度。訣竅是將寬度和高度明確設置爲absolute和/或intrinsic度量。然後沿着相對和絕對之間交替的層次前進。
以display爲基礎開始也不錯，它可以是經典的block和inline-block或flex或我最愛的table。如果您決定使用的display類型一致，那麼它就會變得不那麼混亂。

Fiddle

片段

/* Defaults ~~~~~~~~~~~~~~~*/ 
 

 
html { 
 
    box-sizing: border-box; 
 
    font: 500 16px/1.428 'Raleway'; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    position: relative; 
 
    font-size: 1rem; 
 
    line-height: 1; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 
/* Modified OP ~~~~~~~~~~~~~~~~~~~~*/ 
 

 
.wrap { 
 
    display: table; 
 
    max-width: 500px; 
 
    max-height: 200px; 
 
    background: orange; 
 
} 
 
.s-inner { 
 
    display: table-cell; 
 
    width: 100%; 
 
} 
 
.s-inner > figure { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-image: url(http://www.trbimg.com/img-4fad2af0/turbine/hc-american-school-for-the-deaf-20120510-006); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
} 
 
figure:before { 
 
    content: ''; 
 
    font-size: 3em; 
 
} 
 
.title { 
 
    font-variant: small-caps; 
 
    color: black; 
 
    margin: 10px 30px 0 35%; 
 
    float: right; 
 
}

<link href='https://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet'/> 
 

 
<main class="wrap"> 
 
    <section class="s-inner"> 
 
    <figure> 
 
     <figcaption class="title"> 
 
     <h1> 
 
    HC American School for the Deaf 
 
    </h1> 
 
     </figcaption> 
 
    </figure> 
 
    </section> 
 
</main>

來源

2016-02-29 18:14:21 zer00ne

CSS圖像擴展到父div大小

回答

相關問題