gpt4 book ai didi

css - 图像响应高度

转载 作者:太空宇宙 更新时间:2023-11-04 11:59:08 25 4
gpt4 key购买 nike

我正在为图片库构建响应式 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 和 (max-height: 700px) 但结果是一样的。

最佳答案

您的想法是对的,但是您的代码什么也没做,因为@media 选择器中没有 CSS 选择器。此外,请确保在 HTML 的 header 中设置元 View 端口。尝试摆弄这段代码:

<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,则宽度较小的按升序排列(从较小的宽度到较大的宽度)。

关于css - 图像响应高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29973097/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com