如何在浏览器调整大小时防止图像在网格内调整大小

我对前端编码很陌生，只是在练习网站上工作以帮助习惯代码。在这个网站中，我在左栏中使用了一个带有图像的自举网格。我想要做的是在浏览器大小发生变化时防止图像大小和位置发生变化，就像本网站在其“我们的着名免费软件”部分http://presentation.creative-tim.com/中所做的那样。请注意网格中的图像保持大小不变，并且在浏览器调整大小时在分页符之前保持在相同的位置。如何在浏览器调整大小时防止图像在网格内调整大小

随着浏览器大小的改变，我的图片不断调整大小。我已经试过将所有高度从％改为px，但没有运气。目前我只是在处理大中型浏览器窗口。我还没有尝试过设计小尺寸或小尺寸的窗户。以下是我的HTML和CSS。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Welcome to Philadelphia</title> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="/stylesheets/athletics.css"> 
 
</head> 
 

 
<body> 
 
    <div class="full-contain"> 
 
    <div class="row row-one"> 
 
     <div class="col-lg-6 col-md-6 top-col"> 
 
     <img class="img-responsive center-block" src="http://logos- 
 
       download.com/wp- 
 
      content/uploads/2016/04/Philadelphia_Phillies_logo_logotype.png"> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 top-col">This is a div</div> 
 
    </div> 
 
    <div class="row row-two"> 
 
     <div class="col-lg-6 col-md-6 mid-col">This is a div</div> 
 
     <div class="col-lg-6 col-md-6 mid-col">This is a div</div> 
 
    </div> 
 
    <div class="row row-three"> 
 
     <div class="col-lg-6 col-md-6 btm-col">This is a div</div> 
 
     <div class="col-lg-6 col-md-6 btm-col">This is a div</div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

.top-col { 
 
    background-color: #003086; 
 
    height: 733px; 
 
    color: white; 
 
} 
 

 
.mid-col { 
 
    background-color: #003B48; 
 
    height: 733px; 
 
    color: white; 
 
} 
 

 
.btm-col { 
 
    background-color: #F4793E; 
 
    height: 733px; 
 
    color: white; 
 
} 
 

 
.row-one { 
 
    height: 733px; 
 
} 
 

 
.row-two { 
 
    height: 733px; 
 
} 
 

 
.row-three { 
 
    height: 733px; 
 
} 
 

 
body { 
 
    height: 733px; 
 
} 
 

 
html { 
 
    height: 733px; 
 
} 
 

 
.full-contain { 
 
    width: 100%; 
 
    height: 733px; 
 
}

借口外观粗糙。就像我说的我是初学者。

谢谢！

来源

2017-07-25 Eric

img-responsive Bootstrap类会导致图像使用父元素调整大小。把这个班带走，在你的CSS中设计你的img元素，它会做你想做的事。

来源

2017-07-25 02:54:02 smthngfrnthng

真棒的工作。再次感谢！ – Eric

如何在浏览器调整大小时防止图像在网格内调整大小

回答

相关问题