对高度有反应的图像
Posted
技术标签:
【中文标题】对高度有反应的图像【英文标题】：images responsive to height 【发布时间】：2015-07-10 11:20:03 【问题描述】：我正在为图片库构建一个响应式 WP 主题。响应宽度时一切正常。我尝试设置一个响应高度的屏幕尺寸，因为我的图像在 1200 x 800 的小型笔记本电脑上被截断。我尝试了一些不同的东西，它们都做我想让他们做的事情，但他们改变了风格适用于各种屏幕尺寸，而不仅仅是 1200 x 800。
@viewport
width: device-width;
/**
Small Desktop < 1200px */
@media screen and (max-width: 1200px)
img
height: 75%;
max-height: 650px;
width: 75%;
我也试过@media screen and (max-height: 700px)，但结果是一样的。
【问题讨论】：
您是否尝试在@media 中设置图像的宽度？ @media 什么都不做，除非你在其中设置 CSS 选择器。 您是否尝试将其添加到@media 屏幕和（宽度：1200 像素）和（高度：800 像素） 您可能还想尝试使用 html 设置视口。我从未真正使用过 CSS 视口。在你的标题中试试这个： @WilliamCallahan 这似乎可以做到。对于那些对宽度有反应的人，他们从来不需要在里面。诡异的。如果你愿意，把它写下来作为答案，我会给你功劳。谢谢。 【参考方案1】：您的想法是正确的，但是您的代码根本没有做任何事情，因为 @media 选择器中没有 CSS 选择器。此外，请确保在 HTML 的标头中设置元视图端口。试着摆弄这段代码：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<style>
img
height: 75%;
max-height: 650px;
width: 75%;
@media screen and (max-width: 1200px)
/*This is just an example*/
img
height: 100px;
max-height: 650px;
width: 100px;
</style>
</head>
<body>
</body>
</html>
另外，注意@media 选择器的顺序也很重要。您可以有多个@media 用于多种尺寸。只要确保如果您使用max-width，您的宽度会按升序排列（从较小的宽度到较大的宽度）。
【讨论】：
以上是关于对高度有反应的图像的主要内容，如果未能解决你的问题，请参考以下文章