文章/答案/技术大牛

发布

css高宽固定比例

CSS高宽固定比例基础概念

CSS高宽固定比例是指通过CSS技术实现元素的宽度和高度按照一定的比例进行设置，以保证元素在不同尺寸的屏幕上都能保持其原有的长宽比。这种技术在响应式设计中尤为重要，可以确保图片、视频或其他内容在不同设备上都能正确显示。

类型

使用padding-top或padding-bottom：通过设置百分比的padding值来实现固定比例。
使用vw/vh单位：结合视口宽度（vw）和视口高度（vh）单位来设置元素的高宽。
使用calc()函数：结合calc()函数动态计算元素的高宽。
使用现代CSS特性：如aspect-ratio属性（CSS Houdini提案）。

应用场景

图片容器：确保图片在不同设备上都能保持原始比例。
视频播放器：保证视频播放区域的长宽比，避免视频变形。
响应式布局：在复杂的网页布局中，确保某些元素能够自适应屏幕大小。

示例代码

使用padding-top实现固定比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Aspect Ratio</title>
    <style>
        .container {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 aspect ratio */
        }
        .content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f00; /* Just for visualization */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content"></div>
    </div>
</body>
</html>

使用aspect-ratio属性（现代浏览器支持）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Aspect Ratio</title>
    <style>
        .container {
            width: 100%;
            aspect-ratio: 16 / 9; /* 16:9 aspect ratio */
            background-color: #f00; /* Just for visualization */
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

遇到的问题及解决方法

问题：元素在高宽比例设置后，内容超出容器

原因：可能是由于内容本身的尺寸超过了容器的尺寸，或者容器的尺寸计算有误。

解决方法：

检查内容尺寸：确保内容本身没有超出容器的尺寸。
调整容器尺寸：确保容器的宽度和高度计算正确。
使用overflow属性：如果内容确实超出了容器，可以使用overflow: hidden来隐藏超出部分。

.container {
    overflow: hidden;
}

问题：在某些旧版浏览器中不支持新的CSS特性

原因：旧版浏览器可能不支持最新的CSS特性，如aspect-ratio。

解决方法：

使用Polyfill：对于一些现代CSS特性，可以使用Polyfill来实现兼容。
回退方案：为不支持新特性的浏览器提供回退方案，如使用传统的padding-top方法。

.container {
    width: 100%;
    padding-top: 56.25%; /* Fallback for old browsers */
}

@media (min-aspect-ratio: 16/9) {
    .container {
        aspect-ratio: 16 / 9; /* Modern browsers */
    }
}

通过以上方法，可以有效解决CSS高宽固定比例在实际应用中遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

自动布局约束:如何使视图在调整大小时保持宽高比不变？

ios、xcode、autolayout

在界面构建器中，我们可以固定高度，固定宽度，使两个视图的宽度相等，但是我如何设置约束，以便当调整视图大小时，它保持其宽/高比？谢谢!

浏览 1提问于2013-01-07得票数 31

回答已采纳

1回答

大小时获得新的高度，我可以这样做 newHeight = dWidth * sourceHeight / sourceWidth； newHeight现在是576px 我想知道像photoshop一样获得固定宽度和高度的算法是什么如果在photoshop中我将裁剪设置为宽1024px高700px (固定的宽度和高度) 请参见截图： ? 另一种:裁剪到宽1024px高500px ? 图像总是按比例裁剪，以获得固定的宽度和高度。这个算法的

浏览 28提问于2020-09-24得票数 1

1回答

有没有可能强制JButton始终是方形的？

java、swing、layout、jbutton、layout-manager

我正在编写一个扫雷舰克隆，现在我有问题的是我的网格上的按钮比例-我想允许用户随心所欲地调整窗口大小，但我希望按钮保持相同的1:1宽/高比例，而不是在某些情况下成为煎饼或监狱酒吧:)有什么方法可以轻松地强制JButton始终保持正方形，而不给它固定的宽度和高度？

浏览 0提问于2013-01-17得票数 4

回答已采纳

4回答

如果屏幕不够宽，用CSS如何有条件地调整图像的大小？

html、css、image、resize、width

假设我有一个400 px宽和250 px高的图像。用户调整屏幕大小或在智能手机上加载页面。换句话说，图像应该从400 to宽调整到320 to宽(例如)。

浏览 8提问于2014-01-16得票数 0

回答已采纳

3回答

HTML/CSS -双宽双高单空间字体

html、css、fonts

我试图在HTML/CSS中模拟收据打印机，以模拟收据的模板。打印机，典型的爱普生ESC/POS打印机，有能力打印双高，双宽，或两者。这一切都需要一个单空格字体，因为打印机有40列在正常，20列在双宽或双宽/高。双宽/高并不是一个问题，我可以用CSS和两个维度缩放字体的大小。单独的粗体函数使这一问题更加复杂。我试过

浏览 5提问于2013-10-21得票数 3

回答已采纳

5回答

有没有一种方法可以动态定义图像在页面或特定布局中的显示方式？

php、image-resizing

如果我固定他们的高度和宽度，他们会看起来很紧张吗？如果我固定他们的高度，如果图像的宽度很长，那么也会把整个网站搞得一团糟。保存在本地驱动器中的图像将保持该比例吗？假设用户决定上传图像1(高)*32(宽)。当他上传这张图片时，脚本会将用户上传的图片调整到高度:1000px(只是一个例子) 所以得到的图像是1000px(高)*32000(宽)，你可以看到现在的图像异常大。

浏览 1提问于2010-05-17得票数 1

回答已采纳

2回答

如何在css中按比例调整图像大小以适应200px x 150px缩略图的尺寸？

image、resize、thumbnails

我已经尝试了一些东西，甚至使用CSS剪辑，但没有使其比例适合这里的缩略图。在CSS中，最好的方法是什么，以及如何按比例调整图像的大小以显示200px (宽)x 150 (高)的缩略图？

浏览 1提问于2011-02-20得票数 2

4回答

如何在不丢失比例的情况下缩放背景图像

javascript、html、css

我想创建一个网页背景图像，填充整个背景，而不扭曲图像和改变它的比例。你可以在LaunchRock的页面和他们的主页上看到这一点的很好的实现。我看到了，但是，如果你尝试一下它产生的东西，你会看到背景图像是100%高和100%宽，这意味着照片的原始比例不会保持，图像会被拉伸。请注意，在LaunchRock示例中，如果您调整浏览器窗口的大小，图像将按比例增长，并始终填满整个窗口(无论窗口或背景图像的大小如何)。如果浏览器窗口不够宽，它会裁剪背景图像的侧面(保持图像居中并裁剪左右两侧)，如果窗

浏览 2提问于2012-06-26得票数 0

回答已采纳

1回答

反应性视网膜图像

css、retina

我只想为所有显示器提供一个图像，所以我创建了一个2000 in宽的图像，它是显示宽度的两倍，并将img标签中的宽度和高度设置为1000 in宽和242 in高。我将名为“img响应”的引导类添加到img标记中，其中包括以下css代码：.thumbnail > img,.carousel-innercarousel-inner > .item > a > img { max-width: 100%

浏览 2提问于2016-03-29得票数 0

回答已采纳

9回答

保持div的纵横比，但在CSS中填充屏幕的宽度和高度？

html、css、responsive-design、aspect-ratio

我有一个网站放在一起，有一个固定的纵横比约16:9景观，就像一个视频。又高又细的页面，其内容将拉伸整个宽度，同时保持一定比例的高度。短而宽的页面，其内容将拉伸整个高度，并保持一定比例的宽度。设置成比例的底部填充，但这只相对于宽度起作用，而忽略高度。它只会随着宽度的增加而变大，并显示垂直滚动条。有什么想法吗？

浏览 195提问于2013-12-15得票数 133

回答已采纳

5回答

用于调整图像大小的CSS

html、css

我有以下一些CSS的要求，我需要编写。我有一个图像，需要适合一个区域，它的大小需要保持成比例。我希望它有一个25px宽和25px高的最大尺寸。但如果它大于25px宽或25px高，它需要调整大小，以适应这些尺寸保持其比例。

浏览 0提问于2013-12-14得票数 0

3回答

缩放flex组件并调整其大小

apache-flex、actionscript-3、resize、scale、uicomponents

它有固定的宽高比例，并且是可伸缩的。如果我将它的宽度和高度设置为100%，它试图适应父组件的大小，但它保持宽到高的比例，所以如果它的比例不等于父组件的比例，在调整父组件的大小时，该组件附近可能会出现空白空间。

浏览 2提问于2011-03-30得票数 0

回答已采纳

1回答

尝试在CSS类表中布局div

html、css-tables

我试图坚持最佳实践，不使用使用表，但我尝试使用div设置一个固定宽度的表布局。表:768宽1024高单元1: 56宽单元2: 600宽单元3: 112宽单元1: 56宽单元2: 600宽单元3: 112宽单元1: 56宽单元2: 600宽单元3: 112宽

浏览 1提问于2014-09-27得票数 0

1回答

在html和css中缩放矩形

html、css、width、screen、scale

我想用一个特定的比例做一个矩形( div)。高宽刻度必须是30:50.矩形填充宽度屏幕的40%。如果我调整我的屏幕大小，我如何改变高度，如果你把刻度放在心上？HTML：</div>#bg { width: 40%; }

浏览 5提问于2017-02-22得票数 0

回答已采纳

1回答

如何在CSS/HTML中制作Facebook封面？

html、css

如果有人能帮助我，并向我展示如何在CSS/HTML中做背景封面，我将不胜感激。我打算做的是做一个270px高的100%宽的封面，这将适合我的图像，而不是拉伸我的图像，我不介意它缩放它，但保持正确的比例。示例： <img src="link.jpg">里面的图像应该适合100%的宽度和270px的高度和良好的比例。这有可能吗？

浏览 2提问于2013-07-02得票数 1

3回答

当宽度为100%时图像的全高

css

我希望它从左到右是宽的。尽管在css设置中做了各种更改，但我不能获得图像的全高，但全宽可以工作。<div id="start"> <img class="start" src="bilderGuide/bilderLayout/s

浏览 0提问于2014-05-18得票数 0

2回答

调整图像大小Matlab

matlab、resize-image

我想要调整图像的大小，但它应该在调整大小时保持高/宽的比例。我要做的是，首先检查哪边(宽或高)是长的。如果宽度很长，我会将150设置为宽度的大小，并在不影响图像形状的情况下调整高度，反之亦然。我说的是这个调整大小的图像用于边缘检测算法，输出的二值图像被发送到神经网络，这需要固定数量的输入。在这种情况下，图像的一侧(宽度或高度)是150，而另一侧小于150(因图像而异)。

浏览 5提问于2011-04-28得票数 0

1回答