Question

当全屏显示时，例如lg或md，它适合容器，但当我使窗口变小时，图像会从容器中移出

这是用Bootstrap 3制作的这里是使用的HTML和CSS：

<styles>
.CustomDiv
{
background-color: white;
margin: 6px;
min-height: 1000px;
text-align: center;
font-size: large;
border-radius: 3px;
padding: 0px;
}
.customImg
{
max-width: 1100px;
position: relative;
}
body
{
background: url("images/wood2.jpg") no-repeat;
}
body > nav > .container > .navbar-collapse > ul 
{
font-size: 15px; 
font-weight: 10;
font-family: 'Segoe UI';
letter-spacing: 1px;

}
body > nav > .container > .navbar-collapse > ul > li > a 
{
padding: 20px 30px;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}

.navbar .navbar-collapse {
text-align: center;
}
</styles>

<nav class="navbar navbar-default">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
     </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="Pge2.html">Contact</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a></li>
    </ul>
  </div>
  </div>
</nav>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <div class="CustomDiv">
      <br>
        <div class="container">
        <div class="customImg">
            <div id="imageCarousel" class="carousel slide carouselCustom" data-interval="2000">
                <div class="carousel-inner">
                    <div class="item active center-block">
                        <img src="images/Coffee.jpg" class="center-block img-responsive"/>
                    </div>
                </div>
          </div></div>
          </div>
      </div>
      </div>
    </div>
  </div>
</div>

Answer 1

通过以下方式使您的图片响应：

height:auto;
width:100%;
max-width:1100px;

可以设置max-height。

Answer 2

将此添加到您的风格

IT_Date_String = r.IT_Date?.ToString("yyyy-MM-dd") ?? String.Empty

此样式将图像设置为容器的最大图像.img-responsive { max-width:100%; }

Answer 3

你刚刚在图片标签

中写了这样的内容

             <img src="images/Coffee.jpg" class="center-block img-responsive" style="width: 100%;"/>

当窗口宽度变小时，图像会从容器中移出

3 个答案: