Question

我对前端编码很新，我只是在练习网站上工作以帮助熟悉代码。在这个站点中，我使用的是左侧列中带有图像的引导网格。我想要做的是防止图像大小和位置在浏览器大小改变时改变，就像这个网站在他们的“我们的着名免费赠品部分”http://presentation.creative-tim.com/中所做的那样。请注意网格中的图像如何保持相同的大小，并在调整浏览器大小时在分页符之前保持相同的位置。

我的图像所做的是随着浏览器大小的改变而不断调整大小。我已经尝试将所有高度从％更改为px而没有运气。目前我正在使用大中型浏览器窗口。我还没有尝试过小型或x小型窗户的造型。下面是我的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;
}

请原谅粗糙的外表。就像我说我是初学者一样。

谢谢！

Answer 1

img-responsive Bootstrap类会导致您的图像使用父元素调整大小。拿走那个类并在你的CSS中设置你的img元素的样式，它会做你想要的。

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

1 个答案: