Question

我一直试图制作一个页面，其中有一个图像需要与视口相同的高度，而宽度会相应地拉伸。 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以某种方式适合其子级（图像）的大小。我在这里看了一些帖子，但没有一个与我的问题太相关。

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

Answer 1

你可以试试这个：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

显然，将图片网址编辑为您自己的：）

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

试试这个可能有帮助

＆＃13;

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

＆＃13;

运行代码段以查看结果

Answer 4

如果我以模糊的方式提出问题，我会再次道歉。制定它有点复杂（对我而言）。感谢那些试图帮助我解决问题的人。但是，我决定在这个上使用JQuery并动态设置大小。这是我设法将父div的宽度设置为与其子img的宽度相同的代码（在img的高度相对于窗口高度重新调整之后）：< / p>

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

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

与往常一样，欢迎任何人就我的解决方案给出两分钱。（也许它很重，可以更好地优化。我是JS的新手，所以请随意:)）

将div宽度缩放为图像宽度

4 个答案: