图像大小调整窗口

问题描述：

时候对于我的一个网页移动到文本的底部，我发现，当我调整窗口的大小，画面我已经在页面的右侧（全屏）将调整并移动到文本的底部。如何保持这个形象固定，这样，当我调整它，它不动，但一会出现滚动条，允许用户滚动到看到图像的权利？请在下面找到我的代码：图像大小调整窗口

<div class="row"> 
     <div class="col-md-1"> 
     </div> 
     <div class="col-md-6"> 
      <div class="row"> 
       <div id="info"> 
       <h3 id="rank"><span style = "color:orange"> words:</span></h3> 
       <span id="picture"></span> 
       <h4 id="blockquoteField"></h4>    
       <div id="density"></div> 
       </div> 
      </div> 
     </div> 
     <div class = "col-md-4"> 
      <img src = "image.png" alt = "right picture" style = "height: 580px;"> <!-- original height = 580 px, width = 780px --> 
     </div> 
     <div class="col-md-1"> 
     </div> 
</div>

你怎么能指望别人帮你，如果你不提供的CSS代码，甚至是小提琴或代码片段，所以我们可以看到实际的问题？ –

答

它发生，因为引导正在改变列全宽在较小的屏幕。为了保持当前的风格变化col-md年代到col-xs的

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-xs-1"> 
 
    </div> 
 
    <div class="col-md-6 col-xs-6"> 
 
    <div class="row"> 
 
     <div id="info"> 
 
     <h3 id="rank"><span style="color:orange"> words:</span></h3> 
 
     <span id="picture"></span> 
 
     <h4 id="blockquoteField"></h4> 
 
     <div id="density"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
    <img src="http://placehold.it/800x580" alt="right picture" style="height: 580px;"> 
 
    <!-- original height = 580 px, width = 780px --> 
 
    </div> 
 
    <div class="col-xs-1"> 
 
    </div> 
 
</div>

采用自适应图像

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <div id="info"> 
 
     <h3 id="rank"><span style="color:orange"> words:</span></h3> 
 
     <span id="picture"></span> 
 
     <h4 id="blockquoteField"></h4> 
 
     <div id="density"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <img src="http://placehold.it/780x580" alt="right picture" class="img-responsive"> 
 
     <!-- original height = 580 px, width = 780px --> 
 
    </div> 
 
    </div> 
 
</div>

有没有办法让滚动条在底部，以便所有的文字和图像尺寸始终保持相同？现在，图像仍然在右侧，但随着窗户变小，它变得更加sm。。 – PythonSOS

@PythonSOS，我添加了响应式图像和其他一些dom更改的另一个片段。 – Aslam

最小化图片和字号仍会改变 – PythonSOS

答

GIV你e固定的大小，我以为你温妮图像犯规调整它的自我，并保持它在哪里，当你调整窗口的大小

，使图像不调整给它像

<img src="http://placehold.it/800x580" alt="right picture" style="height: 580px; width:780px;">

在一个固定大小为了制作图像文具，您还必须在您的<div>财产和body固定大小取决于您的代码主标签

答

对不起，如果我不正确地理解你的问题。我从标题假设：调整窗口

时，图像移动到文本的底部是否要垂直对齐的图像和文本，并让他们到彼此相邻，每当我们调整浏览器？

这里是我的代码：

HTML：

<div class="row margin-center" id="center"> 
    <div class="col-md-1"> 
    </div> 
    <div class="col-md-6 align-div" > 
     <div class="row"> 
      <div id="info"> 
      <h3 id="rank"><span style = "color:orange"> words:</span></h3> 
      <span id="picture"></span> 
      <h4 id="blockquoteField"></h4>    
      <div id="density"></div> 
      </div> 
     </div> 
    </div> 
    <div class = "col-md-4 align-div" id="image-margin"> 
      <!-- I am using placeholder with your desired height--> 
     <img src = "http://via.placeholder.com/580x780" alt = "right picture" class="img-valign"> <!-- original height = 580 px, width = 780px --> 
    </div> 
    <div class="col-md-1"> 
    </div>

CSS：

#center { 
    width:1000px; 
} 
#image-margin{ 
    margin-left: 100px; 
} 
.align-div { 
    vertical-align: middle; 
    display: inline-block; 

}

我让宽度1000像素使其变大，所以它不会叠起如果我们调整大小

在div是块级，并且将叠加起来彼此，所以我使用内联块，将它们对准

垂直对齐中间以使文本与在div框

源垂直居中：

How to vertically align a DIV next to an image?

codepen：https://codepen.io/ronalto7777/pen/brgjRe

图像大小调整窗口

相关推荐