CSS:100% 宽度或高度,同时保持纵横比?

2023-12-15

目前,通过 STYLE,我可以使用width: 100% and auto在高度上(反之亦然),但我仍然无法将图像限制在特定位置,分别是太宽或太高。

有任何想法吗?


如果您仅在图像上定义一个维度,则图像长宽比将始终保留。

问题是图像比您喜欢的更大/更高吗?

您可以将其放在一个 DIV 中,该 DIV 设置为您想要的图像最大高度/宽度,然后设置溢出:隐藏。这会裁剪超出您想要的任何内容。

如果图像的宽度和高度为 100%:自动,并且您认为它太高,那是因为纵横比被保留。您需要裁剪或更改纵横比。

请提供更多有关您具体想要实现的目标的信息,我将尽力提供更多帮助!

--- 根据反馈进行编辑 ---

你熟悉吗最大宽度 and 最大高度特性?你总是可以设置这些。如果您没有设置任何最小值并设置了最大高度和宽度,那么您的图像将不会变形(将保留纵横比),并且它不会大于最长的尺寸并达到其最大值。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS:100% 宽度或高度,同时保持纵横比? 的相关文章

  • TinyMCE 图像上传 API 不显示图像选择器图标

    我们按照本教程中的说明进行操作 但由于某种原因 图像对话框上的上传按钮 图像 URL 旁边的搜索文件夹图标 未显示 http www tinymce com wiki php Handling Asynchronous Image Uplo
  • OpenCV Python 删除图像中的某些对象

    我正在使用带有 opencv 和 numpy 的 python 来检测天文中的星星 例如这个1 https i stack imgur com AKwEJ jpg图片 使用模板匹配 我可以用阈值检测星星 单击 2 2 https i sta
  • 使用 PHP 上传、调整图像大小并裁剪图像中心

    我想要创建一个非常非常基本的上传 调整大小和裁剪 PHP 脚本 其功能与 Twitter 用于上传头像图片的方法相同 无论如何我最后检查过 我希望脚本拍摄任何尺寸的图像 将最短边的大小调整为 116 像素 然后裁剪顶部和底部 如果是横向 则
  • 是否可以全局文本对齐表列而不在每行中指定类?

    想知道提高效率的最佳方法是什么 也许使用 jQuery 我可以接受不兼容 ie7 的解决方案 如果需要的话 即使缺乏对 ie8 的支持也可以 table th td class cal center td td left td td cla
  • 为什么 Firefox 对 Helvetica 的处理方式与 Chrome 不同?

    Firefox 和 Mac 版 Chrome 中以 Helvetica 呈现的文本的垂直位置及其内容区域的大小有所不同 例如 在 Chrome 中 如果行高与字体大小相同 则下行部分将被剪裁 我调整了图中块元素的位置 保持基线一致 以说明大
  • 位图太大 as3

    在AS3中 我从zip文件加载png nochump的zip库通过ByteArray到Loader png 的宽度最大可达 45k 像素 但高度仅为 120 像素 这在 Flash 中产生了一个问题 因为图像的宽度只能约为 8000 像素
  • 如何使 CSS 动画/过渡以固定速度而不是固定持续时间播放? [复制]

    这个问题在这里已经有答案了 我有一个 CSS 动画 可以使元素沿直线移动未定义的距离 据我所知 动画具有固定的持续时间 因此无论元素必须移动多远 动画始终需要相同的时间来运行 我该如何制作才能使动画没有固定的duration 但有固定的运动
  • Delphi 7,加载PNG到TImage

    只是想加载 PNG 尝试使用适用于其他格式的 OleGraphic 来使用我的 LoadPic 但在 PNG 上失败 目标是将图像复制到隐藏位图 然后将其屏蔽并复制到可见的工作图像画布 如果 CopyRect 不这样做 请随意提出其他建议
  • 为什么 z-index 对 div 不起作用?

    我试图让我的页脚显示在页脚背景的顶部 但 z index 似乎不起作用 有人看出它有什么问题吗 http jsfiddle net f2ySC http jsfiddle net f2ySC 你必须明确地定义position财产 foote
  • 检测滚动条是否可见(例如在移动设备上)

    我见过很多关于检测 HTML 元素是否可滚动的问题 答案 例如动态检测滚动条 https stackoverflow com questions 33805052 detect scrollbar dynamically 我需要类似的东西
  • Firefox 中出现图像映射问题

    我的图像地图无法在 Firefox 中运行 但可以在 Chrome 和 Safari 中运行 我认为这与 div 内的一些标签有关 你们能帮帮我吗 因为我对此不太了解 div style font size 14px img src dat
  • 固定 CSS 导航栏

    我最近解决了困扰我一段时间的 CSS 导航栏问题 现在我遇到了将其固定到顶部的问题 以便当您滚动页面时它会向下滚动 我知道我需要添加的是 Position fixed 但我不知道在哪里添加它 我最近的尝试导致文本被修复 但导航栏的背景却没有
  • 在聚合物元素中动态注入共享样式(聚合物1.2.3)

    我确实有几个自己创建的嵌套聚合物元素 目前 通过使用聚合物共享样式 我可以将自定义样式注入其他元素 不幸的是 这种方法仅限于静态使用 因此 在实现时 我确实需要通过导入共享样式模块来知道哪个元素应该使用哪种共享样式 and 但在我的用例中
  • 使用 Flexbox 时 Apex 图表无法正确调整大小

    最近 我将 Floats 更改为 FlexBox 以便更轻松地使用面板 正如我在其他问题上所建议的那样 虽然大多数事情都按我的预期工作 但更改后我在使用 Apex Charts 时遇到了问题 完整代码在这里 https github com
  • 两个单独表格上的 Td 高度

    我有两个单独的表 我在每个 tr 上使用焦点 悬停函数 该函数同时在两个表上都很好用 我的问题是 td 高度 因为如果第一个表中 td 的描述更大 将显示在中的两行上相同的td和td的高度将被修改 但仅限于第一个表td 如何记住第一个表中
  • Bootstrap“navbar-brand”导致“navbar-nav”项目从导航栏中的中心位置向右移动?

    我正在尝试创建一个导航栏 其左侧有 品牌 LOGO 而实际的导航项目位于整个栏的中心 我正在使用默认的 Bootstrap 导航栏 因为我一周前才开始学习 Web 开发 到目前为止 情况是这样的 但是 您可以看到导航项稍微移动到页面实际中心
  • 查找 ImageView 相对于其显示的图像的位置

    所以问题就在这里 我在 ImageView 中显示一个大图像 需要找到它相对于图像的位置 像这样 Image gt ImageView
  • 容器中的等间距 div

    这是我的例子 http jsfiddle net rtCP3 62 http jsfiddle net rtCP3 62 我有 3 个 或更多 div 我想在一个容器中均匀分布 当将 Angular 与 ng repeat 一起使用时 样式
  • 不透明度如何影响元素顺序?

    我发现 CSS 有一个非常奇怪的行为opacity与浮动元素相结合 考虑以下 HTML div div Right button div div div Overlay div 最后div将覆盖前两个浮动的 删除不透明度会将最新的 div
  • 管道符 (|) 和脱字符号 (^) 属性选择器有什么区别?

    At W3学校 http en wikipedia org wiki W3Schools他们声明两者 http www w3schools com cssref sel attribute value lang asp and http w

随机推荐

  • 如何用 preg_replace 替换单词而不重复?

    我想创建一个 PHP 函数 它将用内部链接替换文本中的某些单词 到目前为止 这有效 但如果我有两个匹配项 我最终会得到无效的 HTML 代码 Example Welpen hunde Chihuahua Welpen hunde chihu
  • 没有聚合的简单(?)PIVOT

    枢轴 伙计 我只是想念它 也许是因为我没有做聚合 哎呀 也许枢轴不是做到这一点的方法 感觉应该很简单 但是却让我难住了 假设我有这个 SELECT col1 FROM tbl1 col1 414 589 我怎样才能把这两条记录恢复为 fau
  • 如何使用 JavaScript 异步更新我的内容?

    Scenario 我正在编写一个 Web 应用程序 在我的例子中是 MVC 我需要使用 get 请求的响应来更新特定容器 有时我想过滤元素并从响应中找到一个元素以放入原始容器中 我该怎么做 当我需要异步部分更新我的内容时 我正在构建一个 W
  • 通过maven下载本地仓库jar依赖文件

    我无法通过 Maven 下载一个 jar 因此我创建了一个本地存储库并手动下载了 jar 然后使用系统范围添加到 pom
  • 将包含 COMBINING DIAERESIS 的文本转换为 utf-8

    我们有一些包含德语变音符号的文本 例如使用 a 组合分音符号 cc 88 知道如何将此类文本正确转换为 utf8 吗 首先 如果它还不是unicode然后解码它 第二 unicodedata normalize 第三 编码
  • r wordclouds 中的彩色类别

    使用 R 中的 wordcloud 包 我想根据数据集中的分类变量为不同的单词着色 说我的数据如下 name weight group 1 Aba 10 x 2 Bcd 20 y 3 Cde 30 z 4 Def 5 x 在这里作为dput
  • 替代instanceof?

    我听说使用 instanceof 或等效项是糟糕的设计 http www javapractices com topic TopicAction do Id 31 什么时候应该使用instanceof 什么时候不应该使用instanceof
  • Oracle Select 语句中的 IF 条件

    有没有办法在 IF 条件中使用 select 语句 例如 IF SELECT TotalPrice FROM ORDER WHERE ORDERID 123 gt 0 THEN do something ELSE do something
  • 使用 .str.replace() 与 .replace() 更新 pandas DataFrame

    我的 pandas Dataframe df 中有一个列 其中包含一个带有一些尾随十六进制编码 NULL x00 的字符串 至少我认为是这样 当我尝试将它们替换为 df SOPInstanceUID df SOPInstanceUID re
  • 未定义的参考编译器错误

    我想我已经很接近了 但是我遇到了这个错误 我已经用头撞墙几个小时了 我错过了一些愚蠢的东西 我一个字符一个字符地查找 但我找不到它 编译器给了我 main cpp 16 undefined reference to translator t
  • 我的整合金矿算法的缺陷在哪里?

    设置是 给定一个列表N像这样的物体 class Mine public int Distance get set from river public int Gold get set in tons 将黄金从一个矿场转移到另一个矿场的成本为
  • Windows 通知库 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我正在为 Windows 开发一个小型托盘图标应用程序 我需要显示非侵入性的视觉通知 类似于您在 MSN Messenger 或任何其他 IM 应用
  • 获取代理ip地址使用scrapy进行爬取

    我使用 Tor 来抓取网页 我启动了 Tor 和 Polipo 服务并添加了 class ProxyMiddleware object overwrite process request def process request self r
  • 在 JTextField 中键入阿拉伯数字

    我正在尝试在中输入阿拉伯数字JTextField我用过DocumentListener如下 txtName getDocument addDocumentListener this public void insertUpdate Docu
  • windows批处理中call和cmd /c的区别

    有人可以解释一下两者之间有什么区别吗 call someBatchFile bat And cmd C someBatchFile bat 他们都向我建议作为解决方案this问题 但我不明白为什么它们都有效 更重要的是 如果有任何显着差异我
  • 使用perl在字符串中搜索未知子字符串

    我正在尝试从网站下载文件 但我只想下载文件版本比我拥有的同一文件最新的版本 文件名为CTP Latest5 0 37 iso 我需要检查文件名中的字符串 37 因此 如果数字 37 大于我已有的版本 则只有我下载 下载文件后 我想将字符串
  • 将数据帧的行作为参数传递给函数,同时保持其他参数不变

    跟进将数据帧的行作为参数传递给 R 中的函数 并使用指定参数的列名称 我想使用不同的参数组合来训练以下模型 library xgboost library Matrix df lt data frame y sample 0 1 1000
  • 无法使用 Logitech C920 访问 cv::VideoCapture 的属性

    我正在使用 Logitech C920 和 OpenCV 开发一个小型网络摄像头应用程序 实际上 我可以从相机获取图像 对于给定的分辨率没有任何问题 但除了框架宽度和高度之外 我无法访问相机中的任何设置 我有以下代码 正如您所猜测的 该代码
  • 安装 android studio 时安装 HAXM 失败

    无法安装英特尔 HAXM 此计算机满足 HAXM 的要求 但未开启 Intel 虚拟化技术 VT x 在启用 VT x 之前无法安装 HAXM 此消息出现在安装过程之间 但在安装工作室运行之后 请让我了解 HAXM 安装失败对工作室的影响
  • CSS:100% 宽度或高度,同时保持纵横比?

    目前 通过 STYLE 我可以使用width 100 and auto在高度上 反之亦然 但我仍然无法将图像限制在特定位置 分别是太宽或太高 有任何想法吗 如果您仅在图像上定义一个维度 则图像长宽比将始终保留 问题是图像比您喜欢的更大 更高