Question

我的新网站出现问题。但首先我应该给你一些信息。

我正在构建一个包含投资组合的完整响应式网站。我的投资组合图像代表DIV并响应屏幕尺寸。在超过1005px的屏幕上，它的工作非常完美。缩放也很有效。这是因为以下CSS行：

@media only screen and (max-width: 1005px) {

我的形象的div是newtextportfolio。除了100％的宽度和高度外，图像本身不使用CSS。当我给我的div时，跟随定义（高度：自动;）我在我的图像下面得到一条白线。我不想要白线:(

.newtextportfolio {
    width: calc(95% + 10px);
    height: auto; 
    margin-right: 25px;
}

如果我将高度设为200px，我可以让它消失。但是当我在iPad上查看我的网站时，这会使图像拉伸（因为它是固定的，没有响应）。

有谁知道我怎么能让白线消失？我已经用calc，百分比尝试了一些东西，但这也使得线，只有固定像素不会。

.newcontainersmallleftprices {
  width: 310px;
  float: left;
  margin-left: 14px;
}

.newtop1 {
  width: 310px;
  background-image: url("../images/tops/portfolio1.png");
  text-align: center;
  font-size: 23px;
  color: #FFFFFF;
  height: 50px;
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px#888;
  box-shadow: 0 0 5px #888;
  margin: auto;
  padding-top: 20px;
  float: left;
  position: relative;
  z-index: 2;
}

.newtextportfolio {
  width: 310px;
  height: 200px;
  text-align: center;
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px #888;
  box-shadow: 0 0 5px #888;
  margin: auto;
  background-color: #FFFFFF;
  float: left;
  position: relative;
  z-index: 1;
  font-size: 17px;
}

@media only screen and (max-width: 1005px) {
  .newcontainerpricesmall {
    width: 100%;
  }
  .newcontainersmallleftprices {
    width: 95%;
    margin-bottom: 25px;
    margin-left: 4%;
  }
  .newtextportfolio {
    width: calc(95% + 10px);
    height: auto;
    margin-right: 25px;
  }
  .newtop1 {
    width: 95%;
    padding-top: 20px;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 25px;
  }
}

<div class="newcontainer">
  <div class="newcontainerpricesmall">
    <div class="newcontainersmallleftprices">
      <div class="newtop1">Broeckerhave</div>
      <div class="newtextportfolio">
        <a href="http://beta.gjwd.nl/images/portfolio/broeckerhave.png" data-lightbox="image-100" title="" class="portfolioimg"><img src="http://beta.gjwd.nl/images/portfolio/thumb/broeckerhave.png" width="100%" height="100%" /> </div>
    </div>

Answer 1

制作img元素display:block。

https://jsfiddle.net/jmarikle/95gsk2tu/

另一种方法是提供图像vertical-align: top;。这是因为图像是具有一些块属性的内联元素。它们保留行高，字母间距等。块级元素没有按其大小添加计算，并且垂直对齐会折叠导致底部间隙的属性。

CSS中的高度与Auto / Calc

1 个答案: