Html Opera上的Img宽度不工作

我是HTML和CSS3的新手。 我一边学习，一边尝试建立一个新的网页。“我的图像库”适用于除Opera之外的所有浏览器，肖像图像的宽度仅在Opera中失真，但适用于风景图像

HTML

---

如果我理解正确的话，当窗口调整大小时，您基本上是在尝试保持纵向和横向图像的纵横比。为了适应非常适合您的情况，您需要做的是使用视口单位，如下所示：

#landscapephoto {
    width: 50vw; /* 50% of viewport width */
    height: 37.5vw; /* = 50 * (3/4), i.e. three-quarters of viewport width */
}

#portraitphoto {
    width: 46.67vh; /* = 70 * (2/3), i.e. two-thirds of viewport height */
    height: 70vh; /* 70% of viewport height */
    padding-bottom: 40px;
}

这是叉形小提琴：

---

我保留了您的初始横向宽度百分比（50%）和纵向高度百分比（70%），并将其他宽度和高度设置为相对于这些百分比，但显然您可以根据自己的喜好调整这些数字。您还必须调整

div.photolabel

，因为当您调整大小时，它当前相对于图像偏离中心（但这是另一个问题…）。您还应该检查以确保您的目标浏览器都支持视口单位。

如果我理解正确，您基本上是在调整窗口大小时尝试保持纵向和横向图像的纵横比。为了适应非常适合您的情况，您需要做的是使用视口单位，如下所示：

#landscapephoto {
    width: 50vw; /* 50% of viewport width */
    height: 37.5vw; /* = 50 * (3/4), i.e. three-quarters of viewport width */
}

#portraitphoto {
    width: 46.67vh; /* = 70 * (2/3), i.e. two-thirds of viewport height */
    height: 70vh; /* 70% of viewport height */
    padding-bottom: 40px;
}

这是叉形小提琴：

---

我保留了您的初始横向宽度百分比（50%）和纵向高度百分比（70%），并将其他宽度和高度设置为相对于这些百分比，但显然您可以根据自己的喜好调整这些数字。您还必须调整

div.photolabel

，因为当您调整大小时，它当前相对于图像偏离中心（但这是另一个问题…）。您还应该检查以确保您的目标浏览器都支持视口单位。

哪个版本？你能创建一个提琴或将其发布到某个地方吗？我要尝试的第一件事是用

id=“gallery\u imgbox”

重命名你的

div

s中的一个，id在你的页面上应该是唯一的。正如@Gabriel所说，请指定您所指的Opera版本（我猜是基于Presto的旧Opera 12.x，而不是基于Blink的最新Opera 12.x？），创建此问题的解决方案将有助于其他人确认/测试您的问题。最后。。。欢迎来到SO.：-）我一直在使用Opera版本36.0.2130.65进行测试。我上传了一些图片并创建了一个JS提琴（我希望它是正确的，因为我以前从未使用过它）。我的提琴在Opera中也有同样的问题，因为肖像图片上的宽度被扭曲了。小提琴似乎也会扭曲图像，所以我认为这与缩放有关，但我看不出如何对其进行排序。p、 感谢大家的欢迎，Stackoverflow在学习编写代码时是一个非常宝贵的资源。@AmosM.Carpenter我忘了提到为什么我没有使用宽度：30%；高度：自动；至于景观形象。如果我这样做，Safari中的高度会扭曲，当窗口重新调整大小时，文本不会居中。@RHP：感谢您提供浏览器版本和小提琴。我仍然不确定你说的到底是错的，但是-宽度是如何扭曲的？Opera基于Blink，即使用与Chrome、Vivaldi和其他衍生产品相同的渲染引擎，因此我非常怀疑它“在除Opera之外的所有浏览器中都有效”。从你的小提琴来看，似乎缺少了一些JavaScript，我猜，当你点击缩略图时，应该会用更大的图片显示div。你可以将JavaScript添加到你的小提琴中，并编辑你的问题以链接到它。哪个版本？你能创建一个提琴或将其发布到某个地方吗？我要尝试的第一件事是用

id=“gallery\u imgbox”

重命名你的

div

s中的一个，id在你的页面上应该是唯一的。正如@Gabriel所说，请指定您所指的Opera版本（我猜是基于Presto的旧Opera 12.x，而不是基于Blink的最新Opera 12.x？），创建此问题的解决方案将有助于其他人确认/测试您的问题。最后。。。欢迎来到SO.：-）我一直在使用Opera版本36.0.2130.65进行测试。我上传了一些图片并创建了一个JS提琴（我希望它是正确的，因为我以前从未使用过它）。我的提琴在Opera中也有同样的问题，因为肖像图片上的宽度被扭曲了。小提琴似乎也会扭曲图像，所以我认为这与缩放有关，但我看不出如何对其进行排序。p、 感谢大家的欢迎，Stackoverflow在学习编写代码时是一个非常宝贵的资源。@AmosM.Carpenter我忘了提到为什么我没有使用宽度：30%；高度：自动；至于景观形象。如果我这样做，Safari中的高度会扭曲，当窗口重新调整大小时，文本不会居中。@RHP：感谢您提供浏览器版本和小提琴。我仍然不确定你说的到底是错的，但是-宽度是如何扭曲的？Opera基于Blink，即使用与Chrome、Vivaldi和其他衍生产品相同的渲染引擎，因此我非常怀疑它“在除Opera之外的所有浏览器中都有效”。从你的小提琴来看，似乎缺少了一些JavaScript，我猜，当你点击缩略图时，应该会用更大的图片显示div。你可以将JavaScript添加到你的提琴中，并编辑你的问题以链接到它。M.Carpenter非常感谢我玩了这个提琴，一切似乎都按照我预期的方式进行。另一个答案也是一个很大的帮助（遗憾的是，我在以前的搜索中忽略了纵横比），我将阅读视口单位。@RHP:很高兴能提供帮助。如果这有助于解决您的问题，请随意接受答案。我已经整理了代码并更正了图像大小，因此3:2的比例可以正常工作。我还修改了图片位置，这样在我查看了我们现有的网站后，这篇文章仍然有效。我已经修改了JS提琴以反映这些变化，这些变化现在都可以在IE、Firefox、Opera和Chrome中使用，但它们不会在Safari中使用。我试过你的叉子

#landscapephoto {
    width: 50vw; /* 50% of viewport width */
    height: 37.5vw; /* = 50 * (3/4), i.e. three-quarters of viewport width */
}

#portraitphoto {
    width: 46.67vh; /* = 70 * (2/3), i.e. two-thirds of viewport height */
    height: 70vh; /* 70% of viewport height */
    padding-bottom: 40px;
}