javascript - 当高度是限制因素时保持 div 比率

In lại Tác giả: Walker 123 更新时间：2023-11-28 05:37:29 30 4

    

        Percentage sized and still centered.
    

/* slide centered in the middle of the screen + width = 80% */
.slide {
    vị trí: cố định;
    chiều rộng: 80%;
    trái: 50%;
    trên cùng: 50%;
    biến đổi: dịch(-50%, -50%);
    màu nền: đỏ;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}   

/* aspect ratio of 2:1 */
.slide:before{
    nội dung: "";
    hiển thị: khối;
    padding-top: 50%;
}

/* stretch the content to the slide size */
.slide > .slide-content {
    vị trí: tuyệt đối;
    trên cùng: 0;
    trái: 0;
    phải: 0;
    đáy: 0;
    phần đệm: 40px 60px;
    transition: all 0.6s ease-in-out;
}

html, body{
  lề: 0;
}
.slide{
  vị trí: tuyệt đối;
  width: calc(100vh * 2);
  height: calc(100vw * 0.5);
  max-width: 100vw;
  max-height: 100vh;
  trên cùng: 50%;
  trái: 50%;
  biến đổi: dịch(-50%, -50%);
}
.slide-content{
  vị trí: tuyệt đối;
  trên cùng: 0;
  trái: 0;
  chiều rộng: 100%;
  chiều cao: 100%;
  màu nền: đỏ;
  phần đệm: 40px 60px;
  kích thước hộp: hộp viền;
  transition: all 0.6s ease-in-out;
}

  

    Percentage sized and still centered.
  

30 4 0

• java - 如何使我的一些矩形成为黄金(比率)？

  我不太确定如何制作它，因此当在屏幕上绘制矩形时，它有可能是金色的。这是我的游戏随机生成随机矩形的当前代码: public void drawRectangle() { rects.clear(

• python - 跨多个地理围栏的地理围栏半径分布/比率

  我知道这个问题可能是简单的几何问题，但我正在为一个地理区域使用特定的 shapefile 并寻找特定的 gis 解决方案(希望是代码)。 本质上，我想找到覆盖每个独立地理边界的黑色区域。覆盖红色区域、

• Wordpress - 页面具有低文本 HTML 比率

  我有一个 wordpress 网站，我有 5 个低文本 HTML 比率的页面，这是用于类别页面、作者页面和主页。我删除了所有不必要的插件以减少代码，它去掉了一个(我之前有 6 个)。我知道删除代码行之

• java - 两个静态整数相除始终返回 0% 比率

  这个问题已经有答案了: Division of integers in Java [duplicate] (7 个回答) 已关闭 9 年前。 我的代码: public class Test { pub

• css - 通过响应缩放保持 iframe 比率

  我希望在缩小时保持视频嵌入 (iframe) 的尺寸不变。 此时会出现两条黑线，并且随着您将其缩小而变大。 示例:http://jsfiddle.net/k5nbmqau/ 最简单的方法是什么？我想在

• javascript - 当高度是限制因素时保持 div 比率

  我正在尝试创建一个“幻灯片”div，它以恒定的纵横比在屏幕中间居中。 结合这个trick用于居中和this one对于比率，我想出了这个: HTML Percentage

• android - Android 平板电脑和智能手机中最受欢迎的屏幕分辨率/比率

  我正在寻找一个提供统计数据/图表的网站，该网站提供 Android 智能手机和平板电脑上最流行的分辨率/屏幕比例。需要它来设计 UI 并计划如何扩展。如果有人共享数据会很酷。 最佳答案 这是您要找的吗

• ios - 将纵向视频导出为正方形但具有 scaleAspectFit 比率

  在我的应用中，我允许用户以纵向模式录制视频。我在应用程序中使用它，这很好。但是，我正在实现一项功能以在 Instagram 上分享视频，其中视频必须是方形的。 将视频裁剪成正方形，比方说中间部分，是一

• c# - 确定两台服务器的 "combined availability"比率

  我需要从两台服务器创建“可靠性”报告 - 服务器 A 和服务器 B。 两者都跟踪其正常运行时间 - 或者更确切地说，在它们不可用的任何情况下。这些记录存储在 SQL Server 数据库表中 Even

• mysql - 什么是最好的 query_cache_size/Ram 比率

  您好，我想更改我的/etc/my.cnf 文件(mysql 的配置文件)。 以下值应该是多少才能使我的查询获得更好的性能。 query_cache_type = 1 query_cache_limit

• css - 用百分比保持/缩放 DIV 比率

  目前我有一个布局，可以将一些缩略图拉入一个 grid - 每个缩略图都由一种样式定义，该样式使它们保持固定比例(大约 16:9)，该比例由以下定义像素尺寸 (389px x 230px)，但它们在高分

• python - 简单的 wxPython 框架内容调整大小 - 比率？

  我有一个 wxPython 应用程序，带有一个框架和一个面板。该面板上有许多静态框，每个静态框都有按钮和文本框。 我刚刚开始阅读有关 sizer 的内容，但它们似乎可能超出了我的需要，或者它们可能正是

• python - 如何按最佳匹配(difflib 比率)对字符串列表进行排序

  假设我正在构建一个基本的搜索引擎。我有一个字符串列表作为搜索结果，我想对搜索结果列表进行排序，最匹配的结果排在最前面。 我当前的代码如下所示(以命名参数为例) import difflib def o

• r - 计算 R 中的 AUC 比率

  我正在为一组物种生成生态位模型，我想使用 AUC 作为生态位质量的指标。开发 Maxent 的 Steven Phillips 在他的 Maxent 手册中提供了用于计算 R 中 AUC 的代码。但是

• ios - 如何使用 Autolayout 在不同设备上保持 UIView 比率？

  我在 LaunchScreen 中有一个 UIView。 我已将以下约束添加到此 UIView。 我希望我的红色 View 始终占屏幕的 35%。 我计算了 RedView 的高度: 我的 ViewC

• python - Dataframe 按特定列分组，其他列的 aggerage 比率？

  我有一个包含列的数据框:Year 和 Min Delay。示例行如下: 2014 0 2014 2 2014 0 2014 4 2015 4 2015 4 2015

• html - 响应式 CSS 帮助 - 图像/Div 比率

  我需要 CSS/响应式代码方面的帮助。随着我的窗口大小减小，我需要所有元素以相同的比例减小。对此有疑问。箭头和公鸡不会随着视口(viewport)减小而减小。 公鸡脚的影子应该稍微被箭遮住。箭头主体(

• algorithm - Roofline 模型 - 如何计算 flop/byte 比率？

  我想创建 roofline 模型，但我遇到了每字节比率算法失败的问题。你能解释一下如何计算吗？该算法使用 5 点模板进行计算。 这是算法 for(int i=1; i

• python - DateParseError : Unknown datetime string format, 无法解析:比率

  我有一个数据框，其中单元格用 float 填充，列名采用日期时间格式，格式为年+季度 - 例如“1995Q2”。我想划分其中两个列的值并将结果存储在一个新列中。我这样做了: df['ratio'] =

• elasticsearch - 带有 docker-compose 的 ELK 的推荐 RAM 比率

  我有一个 8GB RAM 的生产服务器。我希望在服务器上托管 elastic、logstash 和 kibana。使用 docker compose。 每个容器的推荐 java 大小内存大小是多少。我