将 div 宽度缩放为图像宽度答案

【问题标题】：Scale div width to an image width将 div 宽度缩放为图像宽度
【发布时间】：2017-06-21 12:09:10
【问题描述】：

我一直在尝试制作一个页面，其中将有一个图像需要与视口具有相同的高度，而宽度会相应地拉伸。 img 需要居中。

这是棘手的部分（无论如何对我来说）：我需要在该图像的底部放置一个 div，它会有一些按钮。我认为最好将该 div 的宽度设置为与 img 的宽度相同，这样每当屏幕尺寸发生变化时，所有内容都会保持在同一位置。这是我目前在 HTML 中的内容：

<div id="main_container">
    <div class="exercises">
        <img class="bg" src="image.png"/>
        <div class="footer">
            <ul class="buttons">
                <li>Reset</li>
                <li>Next</li>
                <li>Sortie</li>
            </ul>
        </div>
    </div>
</div>

所以：高度总是 == 视口，宽度是可变的。我考虑过将 div 作为 img 的父级，但我仍然需要使该 div 以某种方式适合其子级（图像）的大小。我在这里阅读了一些帖子，但没有一个与我的问题太相关。

编辑：如果我不够清楚，我很抱歉。我已经说明了问题所在。我希望这有帮助：

【问题讨论】：

很难理解你想要什么。您能否展示您目前的进展，包括您的 CSS 作为 codepen/fiddle/sn-p。

标签： html css image

【解决方案1】：

你可以试试这个：

#main_container {
  width:600px;
}

.exercises {
	width: 100%;
}

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

.footer .buttons {
	width: 100%;
}

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

.buttons li {
	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 编辑为您自己的 :)

【讨论】：

【解决方案2】：

认为这是一个开始。在检查器中更改图像的大小，看看会发生什么。

.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>

【讨论】：

【解决方案3】：

试试这个可能会有帮助

<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>

运行代码sn-p查看结果

【讨论】：

【解决方案4】：

如果我以含糊的方式提出问题，我再次道歉。制定它有点复杂（对我来说）。感谢那些试图帮助我解决问题的人。但是，我决定在这个上使用 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 的新手，所以请随意:)）

【讨论】：