將div寬度縮放到圖像寬度

我一直在試圖製作一個頁面，其中將有一個圖像需要與視口高度相同，同時寬度會相應拉伸。 img需要以中心爲中心。將div寬度縮放到圖像寬度

以下是棘手的部分（對我來說）：我需要在該圖像的底部放置一個div，該div有一些按鈕。我認爲最好的做法是將div的寬度設置爲與img的寬度相同，以便每當屏幕大小發生變化時，所有內容都保持在同一位置。這裏是我迄今爲止在HTML：

所以：高度總是==視口，寬度是可變的。我想過把一個div放在img的父級上，但我仍然需要讓div適合它的孩子的大小（圖像）。我在這裏看過一些帖子，但沒有一個與我的問題太相關。

編輯：如果我不夠清楚，我很抱歉。我已經說明了問題所在。我希望這有助於：

2017-06-21 Vigorski

很難理解你想要什麼。你可以顯示你的進展到目前爲止，包括你的CSS作爲一個codepen /小提琴/片段。 – WizardCoder

你可以試試這個：

#main_container { 
 
    width:600px; 
 
} 
 

 
.exercises { 
 
\t width: 100%; 
 
} 
 

 
.exercises img.bg { 
 
\t max-width: 100%; 
 
    max-height: 100%; 
 
    object-fit:contain; 
 
} 
 

 
.footer .buttons { 
 
\t width: 100%; 
 
} 
 

 
.buttons { 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
.buttons li { 
 
\t width:100%; 
 
    height:50px; 
 
    border:1px solid #000; 
 
    list-style:none; 
 
}

<div id="main_container"> 
 
    <div class="exercises"> 
 
     <img class="bg" src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg"/> 
 
     <div class="footer"> 
 
      <ul class="buttons"> 
 
       <li>Reset</li> 
 
       <li>Next</li> 
 
       <li>Sortie</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

顯然，編輯圖像URL到您自己的:)

來源

2017-06-21 12:26:11

認爲這是一個開始。檢查員更改圖像的大小，看看會發生什麼。

.exercises{background: silver; display: inline-block;} 
 
img{ border: 1px solid black;} 
 
ul{ 
 
    margin: 0; 
 
    padding: 0;} 
 
li{  
 
    float: left; 
 
    width: 33%; 
 
    background: #ccff00; 
 
}

<div id="main_container"> 
 
    <div class="exercises"> 
 
     <img class="bg" src="https://www.techwibe.com/wp-content/uploads/2015/04/chrome_medium.jpg"/> 
 
     <div class="footer"> 
 
      <ul class="buttons"> 
 
       <li>Reset</li> 
 
       <li>Next</li> 
 
       <li>Sortie</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-06-21 12:27:22 sTx

試試這個可以幫助

<div id="main_container"> 
 
    <div class="exercises"> 
 
     <img class="bg" src="https://static.pexels.com/photos/27714/pexels-photo-27714.jpg"/> 
 
     <div class="footer"> 
 
     
 
      <ul class="buttons"> 
 
       <li>Reset</li> 
 
       <li>Next</li> 
 
       <li>Sortie</li> 
 
      </ul> 
 
      
 
     </div> 
 
    </div> 
 
</div> 
 
<style> 
 
#main_container{ 
 
/*Make the container follow the width of body*/ 
 
position:relative; 
 
width:100%; 
 
} 
 
#exercises{ 
 
/*Make the this div follow the width of #main_container*/ 
 
    width:100%; 
 
} 
 
.bg{ 
 
/*Make the the image follow the width of #exercises*/ 
 
width:100%; 
 
height:auto; 
 
} 
 
.buttons{ 
 
/*modifying ul to the bottom position*/ 
 
    position:absolute; 
 
    width:100%; 
 
    bottom:0; 
 
} 
 
.buttons li{ 
 
/*Style the button whatever you want*/ 
 
    list-style:none; 
 
    margin:10px 2%; 
 
    padding:8px 12px; 
 
    background:orange; 
 
    width:20%; 
 
    color:white; 
 
    float:left; 
 
} 
 
</style>

運行的代碼片段，看看結果

來源

2017-06-21 12:30:39

我，如果再我道歉已經以模糊的方式設置了問題。制定它有點複雜（對我來說）。感謝那些試圖幫助我解決問題的人。但是，我決定在這一個上使用JQuery，並動態設置大小。這是我將設法設置父的寬度div的大小相同的它的寬度的子IMG（相對於窗口高度後的IMG的高度已被重新縮放）的代碼：

var imageResize = function() { 
    var screenHeight = $(window).height(); 
    $('.bg').height(screenHeight); 
    var resizedImgWidth = $('.bg').width(); 
    $('.exercises').width(resizedImgWidth); 
    } 

    $(window).resize(imageResize); 
    $(window).load(imageResize);

作爲總是歡迎任何人給我們的解決方案兩美分。（也許它非常重，可能會更好地優化，我是JS的新手，所以感到自由:)）

來源

2017-06-22 08:48:36 Vigorski

將div寬度縮放到圖像寬度

回答

相關問題