CSS无法强制图像宽度和高度

Question

我正在尝试显示具有特定大小和隐藏溢出的全景图像，以最终启用用户引发的平移（代码未包含在下面）。

我以这种方式添加图像：

<div class="pan">
<img src="http://lorempixel.com/image_output/sports-q-c-1920-480-7.jpg">
</div>

我以这种方式设置图像大小参数：

.pan {
  width: 800px;
  height: 400px;
  overflow: hidden;
  border: red solid;
}

但是，当我更改宽度时，高度会按比例更改，并且我没有任何溢出可以隐藏。图像是 13632?×?2936。

这是我从上面的代码得到的结果：

以这种方式设置大小时，我得到以下图像：

.pan {
  width: 400px;
  height: 400px;
  overflow: hidden;
  border: red solid;
}

试图覆盖设置为 100% 的 img 参数（用于其他目的），我得到一个扭曲的图像——仍然没有隐藏的溢出：

.pan img {
  height: 800px;
  width: 400px;
  transition: opacity .6s linear .8s;
}

与 .pan 和容器相关的其他代码（来自下面引用的教程）：

.pan img{
  transition: opacity .6s linear .8s;
}

.pan img.loaded{ opacity: 1; }

.img-pan-container, .img-pan-container img{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.img-pan-container{
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  height: 100%;
  width: 100%;
}

.img-pan-container img{
  -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);
  position: absolute;
  top: 0;
  left: 0;
}

有关信息，我正在尝试实施此示例。但是，我目前并没有将我的问题集中在平移代码的其余部分上，因为我在使用隐藏溢出正确调整图像大小时遇到​​了问题。

Answer 1

的img孩子有比母大.pan，看到的1920px的图像下面片断width和480像素height。但这会裁剪图像的一部分。

片段

.pan {
  width: 800px;
  height: 400px;
  overflow: hidden;
  border: red solid /* demo */
}
img {
  display:block /* fix inline gap */
}

<div class="pan">
  <img src="http://lorempixel.com/1920/480/" />
</div>

更新

根据您更新的问题，很可能您的 cssimg设置为max-width:100%，请参阅上面具有该属性集的相同片段。

片段

.pan {
  width: 800px;
  height: 400px;
  overflow: hidden;
  border: red solid /* demo */
}
img {
  display:block; /* fix inline gap */
  max-width:100% /* YOUR ISSUE */  
}

<div class="pan">
  <img src="http://lorempixel.com/1920/480/" />
</div>

更新OP 的评论：

可能是这种情况...我如何才能img仅覆盖此类？

如果您找不到原点和/或想要保留max-width:100%其他imgs，您可以使用max-width:noneon覆盖.pan > img

.pan {
  width: 800px;
  height: 400px;
  overflow: hidden;
  border: red solid  /* demo */
}
img {
  display: block;  /* fix inline gap */
  max-width: 100%  /* YOUR ISSUE */
}
.pan > img {
  max-width: none
}

<div class="pan">
  <img src="http://lorempixel.com/1920/480/" />
</div>