将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宽度缩放到图像宽度

回答

相关问题