與圖像擬合到最大尺寸響應矩形，同時保持縱橫比

Question

我試圖創建具有一個響應矩形：

1. height即是width
2. background: linear-gradient
3. 62％的矩形內是以垂直和水平方向居中且具有最大尺寸的圖像，所有圖像具有相同的width: 400px但是不同height

我以前做過：

1. 用於獲取響應矩形我用這個方法：

.responsive-rectangle { 
 
    width: 100%; 
 
    max-width: 450px; 
 
    background: -webkit-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8)); 
 
    background: -moz-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8)); 
 
    background: -o-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8)); 
 
    background: linear-gradient(to top, #0071B4, rgba(0, 113, 180, .8)); 
 
} 
 
.responsive-rectangle:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 62%; 
 
}

<div class="responsive-rectangle"></div>

jsfiddle

對準內部矩形我已經使用display: flex;和text-align:center;與.img-wrapper形象：

.responsive-rectangle { 
 
    width: 100%; 
 
    max-width: 450px; 
 
    background: -webkit-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8)); 
 
    background: -moz-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8)); 
 
    background: -o-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8)); 
 
    background: linear-gradient(to top, #0071B4, rgba(0, 113, 180, .8)); 
 
    display: flex; 
 
    text-align: center; 
 
} 
 
.responsive-rectangle:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 62%; 
 
} 
 
.image-wrapper { 
 
    margin: auto; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="responsive-rectangle"> 
 
    <div class="image-wrapper"> 
 
    <img src="https://res.cloudinary.com/zeek/image/upload/v1429436724/whiterryxmsuesx78joy9n9sa.png" alt=""> 
 
    </div> 
 
</div>

jsfiddle

這完美的作品的情況下，與圖像400px x 220px， 但圖像有更大的height不使用正確的寬高比：

.responsive-rectangle { 
 
    width: 100%; 
 
    max-width: 450px; 
 
    background: -webkit-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8)); 
 
    background: -moz-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8)); 
 
    background: -o-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8)); 
 
    background: linear-gradient(to top, #0071B4, rgba(0, 113, 180, .8)); 
 
    display: flex; 
 
    text-align: center; 
 
} 
 
.responsive-rectangle:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 62%; 
 
} 
 
.image-wrapper { 
 
    margin: auto; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="responsive-rectangle"> 
 
    <div class="image-wrapper"> 
 
    <img src="https://res.cloudinary.com/zeek/image/upload/v1444889083/o67qntlwitbxnqz5qyjn.png" alt=""> 
 
    </div> 
 
</div>

jsfiddle

有沒有可以解決我的問題，任何方式？

編輯： 哦，我忘了注意，background-image是不好的解決方案，因爲它不支持SEO。

Answer 1

與您的最終代碼的問題是，僞元素用於保持縱橫比實際上並未發揮其期望的作用。這是因爲.responsive-rectangle設置爲display: flex;。保持縱橫比，你可以進行以下修改：

• 取出.responsive-rectangle:before規則的計算可以在.image-wrapper完成自身
• 從.responsive-rectangle
• 刪除display: flex;刪除現有的規則.image-wrapper和替換它們用：
  • padding-top: 62%;以確保使用正確的縱橫比
  • position: relative;允許img相對於.image-wrapper
  • width: 100%;被定位，以確保它將填補的.responsive-rectangle
• 整個寬度刪除現有的規則img並用替換它們：
  • bottom: 0;，left: 0; ，margin: auto;,right: 0;和top: 0;以允許圖像居中在.image-wrapper
  • position: absolute;相對於它定位到.image-wrapper
  • max-height: 100%;和max-width: 100%;以確保圖像不超過其自然height和width同時保持其寬高比

.responsive-rectangle { 
 
    background: -webkit-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8)); 
 
    background: -moz-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8)); 
 
    background: -o-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8)); 
 
    background: linear-gradient(to top, #0071B4, rgba(0, 113, 180, .8)); 
 
    float: left; 
 
    margin: 0 5px; 
 
    max-width: 450px; 
 
    text-align:center; 
 
    width: 100%; 
 
} 
 
.image-wrapper { 
 
    padding-top: 62%; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
img { 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    right: 0; 
 
    position: absolute; 
 
    top: 0; 
 
}

<div class="responsive-rectangle"> 
 
    <div class="image-wrapper"> 
 
     <img src="https://res.cloudinary.com/zeek/image/upload/v1444889083/o67qntlwitbxnqz5qyjn.png" alt=""> 
 
    </div> 
 
</div> 
 
<div class="responsive-rectangle"> 
 
    <div class="image-wrapper"> 
 
     <img src="https://res.cloudinary.com/zeek/image/upload/v1429436724/whiterryxmsuesx78joy9n9sa.png" alt=""> 
 
    </div> 
 
</div>

http://jsfiddle.net/p23pgqp3/

Answer 2

我必須把它們放在一起才能看到問題。這是你的問題的解決方案，只需使用圖像作爲背景：

<div class="image-wrapper" style="background-image:url('https://res.cloudinary.com/zeek/image/upload/v1429436724/whiterryxmsuesx78joy9n9sa.png')"></div> 

，然後居中

.image-wrapper { 
    background-repeat: no-repeat; 
    width: 100%; 
    background-size: contain; 
    background-position: center center; 
} 

http://jsfiddle.net/bmdqsqx1/1/