Question

所以我的页面上有3个圆形图像。出于某种原因，当我将它们的高度/宽度从px更改为％时，图像就会消失。它们完美地工作在200px高度/宽度和50px ..但我希望它们在20％。

代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="styles.css">
   <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style>
  body{width: 100%;}
/*Parallax*/

.parallax{
    background-image: url("bg.jpg");
    height: 540px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    position:relative;
}
/*Parallax*/

#header{
 position: absolute;
  top: 40%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
	left: 20%;
  font-size: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 20px;
  background-color: #357eca;
  width: 50%;
  word-wrap: break-word;
  opacity: 0.9;
  font-weight: 900;
  padding-left: 5%;
  padding-right: 5%;



}

h5
{   
  color:white; 
  text-align: center;
    font-family: 'Montserrat';
      text-transform: uppercase;
      font-weight: 900;
 
  /*-webkit-margin-before:0.67em;
  -webkit-margin-after:0.67em;
  -webkit-margin-start:0px;
  -webkit-margin-end:0px;
  -webkit-tap-highlight-colour:rgba(0,0,0,0);
  -webkit-font-smoothing:antialiased;
  -webkit-box-direction:normal;
  position: absolute;*/
}
h5:after, h5:before
{
  content: '';
  width: 50px;
  height: 2px;
  background: black;
  margin: 0 10px;
}
/*--- Circular images --- */

.img-circular1,
.img-circular2,
.img-circular3 {
  width: 25%;
  height: 25%;
  background-size: cover;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background: red;
  display: block;
  margin: 0 auto;
}

.img-circular1 {
  background-image: url('/Images/learn.jpg');
}

.img-circular2 {
  background-image: url('/Images/watch.jpg');
}

.img-circular3 {
  background-image: url('/Images/practice.jpg');
}

#container1 {
  top: 100px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  width: 70%;
  background-color: green;
  overflow: auto;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.wrap {
  flex-grow: 1;
}

</style>
</head>
<body>
<div id="navigation"></div>

<div class="parallax"><h5 id="header"><b>Welcome to RyanTeaches</b></h5></div>

<!--<img src="bg.jpg" style="top:60px;height: 510px;min-width: 100%;">-->
<div id="content">
<h2 style="margin-top: 0px;">Activities</h2>
</div>

<div id="container1" style="padding-bottom: 400px;">
  <div class="wrap">
    <div class="img-circular1"></div>
  </div>
  <div class="wrap">
    <div class="img-circular2"></div>
  </div>
  <div class="wrap">
    <div class="img-circular3"></div>
  </div>
</div>

<div id="content">
<h2 style="margin-top: 0px;">Activities</h2>
</div>

<script src="nav.js"></script>
<script src="template.js"></script>
</body>
</html>

＆＃13;

网站查看： http://ryanteaches.com/newindex.html

为什么他们消失了？

干杯。

Answer 1

这是导致这个问题的高度。以这种方式设置宽度可以正常工作，如果你有实际的img标签而不是使用css插入图像，你可以使用height:auto，它可以根据需要缩放图像。

但是，当您说height: 20%时，它会将元素的高度计算为其父级高度的百分比。由于您尚未定义任何元素祖先的高度，因此它将为0（您可以使用浏览器的检查器进行确认）。

因此，您可以定义container div的高度，但是如果您希望它相对于设备的宽度，那么您最好的选择可能就是使用img标记和{ {1}}代替height:auto。

更新：根据您的评论，这是使用background-image标记的示例。我认为这或多或少是你想要实现的目标。

img

  body{width: 100%;}
/*Parallax*/

.parallax{
    background-image: url("bg.jpg");
    height: 540px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    position:relative;
}
/*Parallax*/

#header{
 position: absolute;
  top: 40%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
	left: 20%;
  font-size: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 20px;
  background-color: #357eca;
  width: 50%;
  word-wrap: break-word;
  opacity: 0.9;
  font-weight: 900;
  padding-left: 5%;
  padding-right: 5%;



}

h5
{   
  color:white; 
  text-align: center;
    font-family: 'Montserrat';
      text-transform: uppercase;
      font-weight: 900;
 
  /*-webkit-margin-before:0.67em;
  -webkit-margin-after:0.67em;
  -webkit-margin-start:0px;
  -webkit-margin-end:0px;
  -webkit-tap-highlight-colour:rgba(0,0,0,0);
  -webkit-font-smoothing:antialiased;
  -webkit-box-direction:normal;
  position: absolute;*/
}
h5:after, h5:before
{
  content: '';
  width: 50px;
  height: 2px;
  background: black;
  margin: 0 10px;
}
/*--- Circular images --- */

.img-circular1,
.img-circular2,
.img-circular3 {
  width:100%;
  background-size: cover;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background: red;
  display: block;
  margin: 0 auto;
}

#container1 {
  top: 100px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  width: 70%;
  background-color: green;
  overflow: auto;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.wrap {
  //flex-grow: 1;
  width: 25%;
}

Answer 2

图像消失的原因是，DIV的CLASS =“换行”没有内容IE（没有宽度和/或高度）来显示图像。
简而言之：25％的空DIV不是什么

这样你就可以看到......例如

.wrap {
width: 100px;
height: 100px;
}

当高度/宽度从像素切换到百分比时，图像会消失？

2 个答案: