使用自动/计算的 CSS 中的高度

Question

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

我正在构建一个包含作品集的完整响应式网站。我的投资组合图像位于 DIV 中并响应屏幕尺寸。在超过 1005 像素的屏幕上，它运行完美。缩放效果也很好。这是因为下面的 CSS 行：

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

我的图像的 div 是 newtextportfolio。图像本身不使用 CSS，除了 100% 的宽度和高度。当我为我的 div 提供以下定义（高度：自动；）时，我的图像下方会出现一条白线。而且我不想要白线:(

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

如果我将高度设为 200 像素，我可以让它消失。但是当我在 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;。这是由于图像是具有某些块属性的内联元素这一事实造成的。它们保留了行高、字母间距等。块级元素没有对它们的大小进行这些额外的计算，并且垂直对齐会折叠导致底部间隙的属性。