Question

我对CSS很新，并且无法缩放图片。

我有一系列图像（我无法控制）是幻灯片放映的一部分。到目前为止，我收到的图像都是相当标准的尺寸。我在图像元素上使用了一种样式，将这些样式调整为可见窗口高度的85％。

.image{
top: 5vh;
height: 85vh;
width: auto;
margin: auto;
position: absolute;
left: 10px;
right: 10px;}

这是一个只有以下内容的div：

margin-left: auto;
margin-right: auto;

这个工作得很好。问题是我刚刚收到的图像非常宽，导致它与图像左右两侧的内容重叠。我尝试在图像样式上添加最大宽度

max-width:85vw;

然而，这导致图像扭曲。

有没有办法可以实现以下功能？＆＃34;将图片调整为视口高度的85％但不超过任意尺寸的85％，并且不会扭曲图片。＆＃34;

修改

正如我在下面提到的，隐藏溢出并没有吸引我。通过对上面代码的以下修改，我最终得到了我想要的东西。

.container
{
  margin-left: auto;
  margin-right: auto;
}
.image
{
  top: 5vh;
  max-height: 85vh;  /* this */
  max-width: 85vw;   /* and this */
  width: auto;
  margin: auto;
  position: absolute;
  left: 10px;
  right: 10px;
}

CSS缩放图片的高度和宽度

0 个答案: