Html 带有自动/计算的CSS中的高度

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

我正在建立一个完整的响应网站与投资组合。我的公文包图像位于一个分区中，并根据屏幕大小进行响应。在超过1005px的屏幕上，它工作得非常完美。而且缩放效果非常好。这是因为以下CSS行：

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

有我照片的部门是newtextportfolio。除了100%的宽度和高度外，图像本身不使用CSS。当我给我的div指定以下定义（height:auto；）时，我的图像下面会有一条白线。我不想要白线：(

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

有人知道我怎样才能使白线消失吗？我已经尝试了一些计算方法，百分比，但这也能使白线消失，只有固定像素不能

.newcontainersmallleftprices{
宽度：310px；
浮动：左；
左边距：14px；
}
.newtop1{
宽度：310px；
背景图片：url（“../images/tops/portfolio1.png”）；
文本对齐：居中；
字体大小：23px；
颜色：#FFFFFF；
高度：50px；
-莫兹盒阴影：0 0 5px#888；
-网络工具包盒阴影：0 5px#888；
盒影：0 0 5px#888；
保证金：自动；
填充顶部：20px；
浮动：左；
位置：相对位置；
z指数：2；
}
.newtextportfolio{
宽度：310px；
高度：200px；
文本对齐：居中；
-莫兹盒阴影：0 0 5px#888；
-网络工具包盒阴影：0 5px#888；
盒影：0 0 5px#888；
保证金：自动；
背景色：#FFFFFF；
浮动：左；
位置：相对位置；
z指数：1；
字号：17px；
}
@仅介质屏幕和（最大宽度：1005px）{
.新集装箱价格表{
宽度：100%；
}
.newcontainersmallleftprices{
宽度：95%；
边缘底部：25px；
左缘：4%；
}
.newtextportfolio{
宽度：钙（95%+10px）；
高度：自动；
右边距：25px；
}
.newtop1{
宽度：95%；
填充顶部：20px；
左侧填充：5px；
右侧填充：5px；
右边距：25px；
}
}

布罗克哈德

使

img

元素

显示：block

---

另一种方法是使图像

垂直对齐：top；

。这是因为图像是具有某些块属性的内联元素。它们保留了行高、字母间距等。块级元素的大小没有这些额外的计算，垂直对齐会折叠属性t这是底部出现缺口的原因。

是的！太好了。我已经为此工作了6个星期了哈哈！谢谢！

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