首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

编写媒体查询,我不明白为什么它会改变我的img宽度而不是高度?

媒体查询是一种在CSS中使用的技术,它允许我们根据设备的特性和屏幕尺寸来应用不同的样式。通过使用媒体查询,我们可以根据设备的宽度、高度、屏幕方向、分辨率等条件来调整元素的样式。

当你在媒体查询中设置了一个条件,例如设备宽度小于某个值时,应用特定的样式,这意味着当设备的宽度满足这个条件时,相关的样式将被应用到对应的元素上。

在你提到的情况中,如果媒体查询改变了img元素的宽度而不是高度,可能有以下几个原因:

  1. 媒体查询的条件只针对宽度进行了设置,而没有设置高度。这意味着当设备的宽度满足条件时,相关的样式将被应用到img元素的宽度上,而高度将保持不变。
  2. 在媒体查询中,可能存在其他的样式规则或者CSS属性,导致img元素的宽度被显式地设置为一个特定的值,而高度没有被设置或者被设置为auto。这样就会导致在满足媒体查询条件时,img元素的宽度发生改变,而高度保持不变。
  3. 可能存在其他的CSS规则或者样式冲突,导致img元素的宽度被其他样式所覆盖或者修改,而高度没有受到影响。

为了解决这个问题,你可以检查以下几个方面:

  1. 确保媒体查询的条件中同时包含宽度和高度的设置,以便在满足条件时同时应用到img元素的宽度和高度。
  2. 检查媒体查询之外的CSS规则,确保没有其他的样式规则或者属性设置会影响到img元素的宽度。
  3. 检查是否存在其他的CSS规则或者样式冲突,可能会导致img元素的宽度被其他样式所覆盖或者修改。

总结起来,媒体查询是一种用于根据设备特性和屏幕尺寸应用不同样式的技术。如果媒体查询改变了img元素的宽度而不是高度,可能是由于媒体查询条件、其他CSS规则或者样式冲突等原因导致的。在解决问题时,需要检查媒体查询条件的设置、其他CSS规则以及样式冲突等方面。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

详细聊一聊如何使用响应式图片,提升网页加载速度

例如,如果您屏幕宽度为700像素,您浏览器可能仍会下载1600像素宽图像,不是800像素宽图像。这是因为浏览器还考虑了您设备像素密度。...默认情况下,如果您没有将sizes属性添加到img标签中,它会假定尺寸为100vw,这就是为什么上面的图像根据浏览器窗口完整宽度进行缩放。...在这种情况下,我们使用100vw,这意味着我们希望浏览器根据浏览器窗口完整宽度选择图像尺寸。 第二个项800px没有媒体查询只是一个尺寸。这被视为我们回退尺寸。...如果没有任何媒体查询匹配,则使用img标签作为备选项,这也是为什么我们没有针对较大屏幕尺寸专门设置source元素原因。...为什么要使用picture元素不是其他替代方案 对于picture元素一个大误解是,为什么要使用它不是img元素sizes属性或CSS。

52330

学姐叫我看 CSS 新出容器查询,然后把公共组件重构成响应式

我们一般使用CSS媒体查询来检测视口宽度高度,然后根据该模式改变设计。 这就是在过去10年中设计Web布局方式。...例如,如果在平板中使用 featured 也就是 PC 样式,它不能工作,为什么?因为它媒体查询宽度是大于1300px。 不仅如此,当内容低于预期时,我们还会面临一个问题。...这样的话,如果我们把思路转向组件父组件呢?换句话说,如果我们查询父组件,并根据父组件宽度高度来决定组件应该是什么样子呢?我们来看下容器查询概念。 什么是容器查询 首先,让定义容器。...注意是如何将每个变体映射到一个特定上下文,不是一个视口。为了进一步证明这一点,我们配合 CSS网格一起使用时,组件行为会有何不同。...我们可以根据当前变化对它们进行排序,但所有的东西都有一个限制。有时,前端开发人员最好处理一个全新组件,不是使用容器查询创建变体。 考虑以下。

2.2K30
  • 每个高级前端工程师都应该知道前端布局

    不想做了设计工作,最后却说它不好看,因为不会做设计。 2.自适应 自适应是一套代码,无论屏幕尺寸如何变化,改变只是页面的元素尺寸,不会出现三栏变两栏表格变化。...以前,领导和设计总让修改页面,说是自适应窗口变化。结果要求把三栏改成两栏。为什么要把这个按钮隐藏起来,那个按钮改成外观,怎么改呢?难道不需要设计一张图片吗?不是在幻想?...:4:3, 5:3 智能手机屏幕尺寸和分辨率列表 4.常见布局 4.1 百分比布局 当改变窗口高度宽度时,通过给出 height, width, padding, border, 和 margin..., and padding-bottom 百分比值不是指容器高度,而是指父容器宽度)。...4.2 媒体查询布局 使用 @media 媒体查询,我们可以针对不同屏幕尺寸编写不同样式,从而实现响应式布局。

    22320

    响应式布局,你需要知道这些

    这里只需要记住一点,百分比是相对于父元素宽度高度计算。 到这里,相信你已经掌握了响应式布局里常用所有单位。接下来,我们介绍弹性盒和栅格,它们都不是单位,而是一种新布局方案。...UI 库对 Grid 实现中,通常会使用到媒体查询,这也是响应式布局核心技术。...媒体查询 媒体查询(Media Query)是 CSS3 规范中一部分,媒体查询提供了简单判断方法,允许开发者根据不同设备特征应用不同样式。...内容会溢出视口外,导致出现横向滚动条对不对,这在移动端是非常不好浏览体验,因为用户往往更习惯上下滚动,不是左右滚动,所以我们需要确保图片内容不要超出 viewport,可以通过设置元素最大宽度进行限制...srcset 支持定义几组图片和对应尺寸 sizes 支持一组媒体查询条件 <!

    1.7K20

    css-in-js 探讨

    这就是为什么CSS有时会被淘汰原因 - 即使通过不同状态和媒体查询管理样式同样重要且同样具有挑战性。...一直在花费大量精力尝试各种方法,主要是在个人项目上,所以这个系列目的只是告知,不是给你解决方案。 CSS挑战 在深入研究代码之前,有必要解释Web应用程序样式化方面最显着挑战。...可能会想到内联样式来解决此问题,但它们不支持伪类,属性选择器,媒体查询等。 可重用性 重用规则集,媒体查询等是最近很少看到一个主题,因为它已经被Sass和Less等预处理器解决了。...最喜欢这种语法好处是它就像常规CSS,减去插值。这意味着我们可以更轻松地迁移CSS代码,并且我们可以使用现有的css知识,不必熟悉在对象语法中编写CSS。...请注意,我们可以在我们样式中插入几乎任何东西。此特定示例演示了如何将媒体查询保存在变量中并在多个位置重用它。

    5.4K20

    超越媒体查询:使用更新特性进行响应式设计

    实上,当媒体查询与这些功能一起使用时,它更像是一种补充,不是一种完整方法。让我们看看它是如何工作。...注意,我们仍以这种方式使用媒体查询,但是元素本身驱动了响应行为,不是在CSS中定义了断点 ?。...浏览器查找媒体查询与当前视口宽度匹配第一个元素,然后它将显示适当图像(在srcset属性中指定)。...2x, flower1x.png 1x " src="flower-fallback.jpg" > 我们可以做另一件事是根据设备本身屏幕分辨率(通常以每英寸点或dpi来衡量)在CSS中编写媒体查询...vh是视口高度或可见屏幕高度首字母缩写。 100vh代表视口高度100%(取决于设备)。 同样,vw代表视口宽度,这意味着设备可视屏幕宽度100vw则代表视口宽度100%。

    4.1K10

    rem在响应式布局中应用

    rem在响应式布局中应用 最近做了一些响应式页面,遇到了一些问题,想了些解决方法,在这里总结一下。目前响应式主流实现方式是百分比布局,加上媒体查询@media screen。...关于媒体查询还有媒体查询一些兼容性问题,网上介绍很多 其实响应式布局中主要困扰我们问题还是元素等比缩放。目前元素等比缩放主要有以下两种解决方案。 实现等比缩放一些方案 1....利用img元素等比缩放特点 这种情况最为常见,只需要百分比设置img元素宽度img元素高度就会随着宽度等比缩放。这也是我们在响应式界面中遇到最主要场景。...如果我们始终将跟元素font-size大小赋值为视口宽度,那么所有以rem为单位尺寸都是视口宽度百分比。这样我们就可以用rem做为元素高度单位,他将随着视口宽度变化。...rem布局分母只有一个就是视口宽度。妈妈再也不用担心弄错分母了。 3.

    1.6K40

    新一代响应式设计:适应多设备最佳解决方案

    新“基本优先”方法,以及为什么放弃了“移动优先”! 意识到“移动优先”是一个好主意,但它仍然不是最好,因为就像我之前说,有时移动设备与桌面设备非常不同。...网络上常见做法是使用仅以最小宽度为起点没有最大宽度断点(称之为“开放式断点”),这是一个非常大问题!你问为什么?因为你几乎无法控制上层断点会受到什么影响!...它非常难以阅读,更糟糕是,如果你在底部添加了一些内容,它会影响所有上面的断点没有任何控制! 了解响应式断点类型 将响应式断点分为两种类型,打开断点和闭合断点。...Open breakpoints 打开断点 当我们使用媒体查询时,有一个起始值但没有结束值。例如: Closed breakpoints 闭合断点 当我们使用具有开始和结束值媒体查询时。...这意味着在这种方法中,以这个例子来说,如果改变移动平板样式,桌面版样式并不会受到影响;同样地,如果改变桌面版样式,移动平板样式也不会受到影响。这就是CSS响应式设计自由性!

    28330

    分享一次纯 css 瀑布流 和 js 瀑布流

    } .item .content-mid { height: 100px; } .item .content-sma { height: 50px; } 当然为了布局具有响应式效果,可以借助媒体查询属性...只是在 .masonry 容器中使用 CSS 不一样; 在 .masonry 中是通过采用 flex-flow 来控制列,并且允许它换行 这里关键是容器高度这里要显式设置 height 属性,...前面也提到过了,如果不给 .masonry 容器显式设置高度是无法包裹项目列表,那么这里响应式设计中就需要在不同媒体查询条件下设置不同高度值: @media screen and (max-width...// item top 值:第一行:top 为 0 // 其他行:必须算出图片宽度在 item 宽度缩小比例,与获取图片高度相乘,从而获得 item 高度 //...就可以设置每张图片在瀑布流中每块 item top 值(每一行中最小 item 高度,数组查找) // item left 值:第一行:按照每块 item 宽度值*块数 //

    2.4K40

    大厂前端面试考什么?5

    ;对媒体查询理解?...媒体查询由⼀个可选媒体类型和零个或多个使⽤媒体功能限制了样式表范围表达式组成,例如宽度、⾼度和颜⾊。...媒体查询,添加⾃CSS3,允许内容呈现针对⼀个特定范围输出设备⽽进⾏裁剪,⽽不必改变内容本身,适合web⽹⻚应对不同型号设备⽽做出对应响应适配。...如果媒体查询中指定媒体类型匹配展示⽂档所使⽤设备类型,并且所有的表达式值都是true,那么该媒体查询结果为true。那么媒体查询样式将会⽣效。<!...(4)如果“固有尺寸”含有固有的宽高比例,同时仅设置了宽度或仅设置了高度,则元素依然按照固有的宽高比例显示。(5)如果上面的条件都不符合,则最终宽度表现为300像素,高度为150像素。

    96420

    随方逐圆--全面理解CSS媒体查询

    媒体查询出现之前,针对不同尺寸设备设计常常依靠JS或PHP等依靠userAgent来勉强实现,现在自适应响应式设计成为了家常便饭 [I]....例如width, height, color等 CSS3中媒体查询让内容呈现可以根据设备进行变化, 不需要改变内容本身 1.1 CSS2中媒体查询 在CSS2中,媒体查询只使用于和...(如可视区域宽度或打印机纸盒宽度宽度 height – 输出设备渲染区域(如可视区域高度或打印机纸盒高度高度 device-width – 输出设备宽度(整个屏幕或页高度不是仅是渲染区域...) device-height – 输出设备高度(整个屏幕或页高度不是仅是渲染区域) orientation – 设备处于横屏(宽度大于高度)模式还是竖屏(高度大于宽度)模式 aspect-ratio...媒体特性 3.1 根据媒体特性范围查询 指定一个固定宽度通常是没有意义,更多情况下,我们需要限定是类似“小于等于”或“大于等于”这样范围,大多数媒体特性可以通过添加“max-”和“min-

    1.2K20

    Stable Diffusion WebUI详细使用指南

    宽度高度:输出图像尺寸。对于v1模型,您应该至少将一侧设置为512像素。例如,将宽度设置为512,高度设置为768,以获得一个2:3竖向图像。...直接提高模型原生输出分辨率(例如,将宽度高度设置为1024像素)可能会导致一些问题,比如构图失真或者生成异常图像(例如,图像中出现多余头或其他元素)。...一次多生成几张图可以挑选出你更满意图片。 步骤5:为新图像编写提示。将使用以下提示: a girl, sea。 步骤6:点击生成按钮生成图像。调整去噪强度并重复。...现在原图是1024x1024,现在想生成图是768x1024。 Just resize将按比例缩放输入图像以适应新图像尺寸。它会拉伸或挤压图像。可以看到图片发生了挤压。...还是刚刚例子: image-20240411122812971 Inpaint upload Inpaint upload功能允许您上传一个独立蒙版文件,不是手动绘制它。

    45710

    Stable Diffusion WebUI详细使用指南

    在反向提示词部分,可以输入你不想在图片上看到内容。 宽度高度:输出图像尺寸。当使用v1模型时,您应该将至少一边设置为512像素。...宽度高度:输出图像尺寸。对于v1模型,您应该至少将一侧设置为512像素。例如,将宽度设置为512,高度设置为768,以获得一个2:3竖向图像。...一次多生成几张图可以挑选出你更满意图片。 步骤5:为新图像编写提示。将使用以下提示: a girl, sea。 步骤6:点击生成按钮生成图像。调整去噪强度并重复。...现在原图是1024x1024,现在想生成图是768x1024。 Just resize将按比例缩放输入图像以适应新图像尺寸。它会拉伸或挤压图像。可以看到图片发生了挤压。...还是刚刚例子: Inpaint upload Inpaint upload功能允许您上传一个独立蒙版文件,不是手动绘制它。 Batch 使用批处理可以对多张图片进行修复或进行图像转换。

    64720

    CSS 常见面试题速查

    标签,因为 @import 不是 dom 可以控制 # 为什么要初始化 CSS 样式 因为浏览器兼容问题,不同浏览器对有些标签默认值是不同,如果没对CSS初始化往往会出现浏览器之间页面显示差异...# 关于媒体查询 是什么 媒体查询由一个可选媒体类型和零个或多个使用媒体功能限制样式表范围表达式组成,例如宽度高度和颜色 媒体查询在 CSS3 中出现,允许内容呈现针对一个特定范围输出设备进行裁剪...怎么使用 媒体查询包含一个可选媒体类型和,满足 CSS3 规范条件下,包含零个或多个表达式,这些表达式描述了媒体特征,最终会被解析为 true 或 false 如果媒体查询中指定媒体类型匹配展示文档所使用设备类型...,并且所有表达式值都是 true,那么该媒体查询结果为 true,那么媒体查询样式会生效。...# 为什么有时会用 translate 来改变位置,不是定位 translate() 是 transform 一个值。

    90710

    静态布局、自适应布局、流式布局、响应式布局、弹性布局等概念和区别

    1、布局特点:屏幕分辨率变化时,页面里面元素位置会变化大小不会变化。 2、设计方法:使用 @media 媒体查询给不同尺寸和介质设备切换不同样式。...再搭配媒体查询技术使用。...,都是检测设备,根据不同设备采用不同css,而且css都是采用百分比不是固定宽度,不同点是响应式模板在不同设备上看上去是不一样,会随着设备改变改变展示样式,自适应不会,所有的设备看起来都是一套模板...那么为什么一般多是 html{font-size:62.5%;} 不是 html{font-size:10px;}呢?...(特定屏幕尺寸下,html元素font-size应当设置为何值,是使用这个方案时设计师和程序员需要反复考虑后确定,以下试举一段相关CSS媒体查询代码),即可自动改变所有用rem定义尺寸元素大小

    10.6K33

    响应式设计

    首先,它告诉浏览器当解析 CSS 时将设备宽度作为假定宽度不是一个全屏桌面浏览器宽度。其次当页面加载时,它使用 initial-scale 将缩放比设置为 100%。...同时当用户默认字号改变时候,em 还能相应地缩放,因此它更适合当断点。 在媒体查询里更适合用 em,em 是基于浏览器默认字号(通常是 16px)。...)——匹配高度小于等于20em视口 (orientation: landscape)——匹配宽度大于高度视口 (orientation: portrait)——匹配高度大于宽度视口 (min-resolution...max-width 是用来排除某些规则方式,不是一个常规手段。...用 Flexbox 布局也可以,设置弹性元素 flex-grow 和 flex-shrink(更重要),让元素能够始终填满屏幕。要习惯将容器宽度设置为百分比,不是任何固定值。

    2.1K10

    10分钟内就可以学会几个CSS高招

    所以,完全理解为什么你会讨厌 CSS,但今天,于分享是一个小课程,你将学习如何使用现代功能编写干净 CSS,同时避免在 2021 年以及未来不应该编写糟糕代码。...,把每个 HTML 元素想象成盒子里面的盒子 ,你有可以有宽度高度内容 ,你可以在周围添加填充那个盒子来挤压内容,然后,你可以在外面添加一个边框,然后,在边框周围添加额外不可见空间,称为边距。...例如,你可能有一篇文章首选宽度为 50%,但在小屏幕上,你希望将其固定为 200 像素或在大屏幕上固定为 800 像素,你可以通过编写将有条件地应用 CSS 媒体查询来实现基于视口大小,唯一问题是媒体查询会让你想要随着项目的增长离开自己...今天,虽然不是所有地方都支持它,但我们可以使用宽高比属性不是填充废话,我们可以在视频上定义宽高比,我们就完成了。 消除 CSS 代码是让它更有趣一个重要部分,但同样重要是让你代码更灵活。...9、计数器状态 刚刚说过 CSS 不是一种编程语言,但你是否知道它实际上内置了一个状态管理机制,你可以在不编写任何 JavaScript 代码情况下跟踪 CSS 代码中运行计数。

    1.4K20

    JavaScript是如何工作:渲染引擎和优化其性能技巧

    将元素设置为不可见,但是同样在布局上占领一定空间(例如,它会被渲染成为空盒子),但是 “display:none” 元素是将节点从整个 render tree 中移除,所以不是布局中一部分 。...每个渲染器代表一个矩形区域,通常对应于一个节点 CSS 盒模型。它包含几何信息,例如宽度高度和位置。 渲染树布局 创建渲染器并将其添加到树中时,它没有位置和大小,计算这些值称为布局。...这些将在帧中某个点调用 callback ,可能在最后。我们想要做是在帧开始时触发视觉变化不是错过它。...本质上,直接对一些元素进行样式更改,不是使整个页面无效。 优化布局 浏览器布局重新计算可能非常繁重。 考虑以下优化: 尽可能减少布局数量。...对宽度高度、左、顶等属性更改,以及通常与几何相关属性更改,都需要布局。所以,尽量避免改变它们。 尽量使用 flexbox 不是布局模型。

    1.6K30

    理解CSS3中background-size(对响应性图片等比例缩放)

    ,为了自适应不同大小分辨率图片,门需要使用css3中媒体查询来针对不同分辨率设置宽度高度,虽然这种方式是可以解决问题,但是解决方式并不是太好,并且很繁琐,当然门也想过直接使用百分比设置图片大小...css3中媒体查询真对不同分辨率等比例缩放不同height(高度);今天门重新来学习下background-size 这个具体属性值,并且使用新方法来解决针对响应性布局背景图片自适应。...使用padding-top:(percentage)实现响应式背景图片 门都知道,处理在响应性布局时候,背景图片都是等比例缩放,比如上面的使用图片情况,使用 引入图片的话...门之前项目中常见做法是根据css3媒体查询方法来做,根据不同手机分辨率等不同,来等比例缩放背景图高度,虽然这种方式是可以解决问题,但是这种通过人肉方式来进行设置并不好,也很繁琐,今天门来学习使用...: center ; 同时门也要保证 图片宽度最大等于父容器宽度;因此下面的HTML代码如下: 使用padding-top实现响应性图片(图片宽度是1024px,高度是316px)</h3

    2.9K20

    CSS布局(四) float详解

    如上图,普通div如果没有设置宽度它会撑满整个屏幕,在之前盒子模式那一节也讲到过。...如果给div增加float:left之后,它突然变得紧凑了,宽度发生了变化,把内容“王福朋”三个字包裹了——这就是包裹性。...div设置了float之后,其宽度会自动调整为包裹住内容宽度不是撑满整个父容器。   注意,此时div虽然体现了包裹性,但是它display样式是没有变化,还是block。 ?   ...第一个例子,正常img中间是会有空格,因为多个标签会有换行,浏览器识别换行为空格,这也是很正常。...三、清除浮动 float具有“破坏性”,它会导致父元素“坍塌”,这将不是所要看到。如何去避免float带来这种影响呢(也就是我们常说“清除浮动”) ?

    1.5K80
    领券