CSS如何根据高度缩放和宽高比宽度？

文章/答案/技术大牛

发布

1回答

css背景图像，自动缩放和裁剪填充屏幕。

css、background

是否有CSS规则可以自动缩放图像并裁剪图像以填充整个容器？现在，我正在使用javascript进行所有这些计算和缩放</em

浏览 1提问于2013-07-24得票数 0

回答已采纳

2回答

html、css

假设高度是父div的80%，我希望宽度是高度的两倍。所以我可以这样做吗：这是可能的，或者我有其他方法来实现这一点吗？

浏览 14提问于2020-05-11得票数 0

2回答

我想要一个图像跨越整个网页的宽度(980px到2000px+)。当我只对图像指定宽度:100%时，为了保持宽高比，图像的高度对于大屏幕来说也会变得相当大。<img src="imageFileName.jpg" width=100% /> 为了避免高度问题，我看到许多网站都会放大图像，宽度保持在网页的100%，高度保持不变。谁能告诉我如何放大图像，以便我可以保持图像的高度固定，也有图像扩展到1

浏览 0提问于2014-10-10得票数 0

1回答

使用IM将所有图像的大小调整为相同的绝对宽度

imagemagick

我有一堆不同大小和宽高比的图片，大多数(但不是全部)都是“肖像”模式。我如何将它们都缩放到完全相同的绝对宽度(比如600px)，并让IM使用适当的高度来保持宽高比)？我在-geometry中看到的文档和示例总是同时使用宽度和高度，除非它们使用相对比例，我不想在这里这样做。

浏览 13提问于2019-01-11得票数 1

回答已采纳

3回答

调整图像大小

jquery、image、resize、aspect-ratio

下面的代码可以很好地根据宽高比和高度来调整图像的大小，我也可以根据宽度创建一个单独的函数。但我并不总是确定图像是否需要按高度或宽度缩小。例如，如果需要调整图像大小的空间是100宽和100高，而图像是150 x 90，那么它就是需要缩小的宽度。如果图像是80 x 160，则需要缩小高度。所以我想问的是，如何修改下面的代码，使其按宽高比缩小图像，以适应宽度和<

浏览 1提问于2009-11-16得票数 2

回答已采纳

1回答

缩放图像以适应屏幕，而不更改其纵横比

html、css、sass、flexbox、scale

如何让图像在CSS中保持其宽高比的同时缩放屏幕？例如，如果我有一个高过宽的图像，它的height应该是100% (和width: auto;)。但是，如果图像的宽度大于高度，则其width应为100% (和height: auto;)。如果height和width都为auto，则图像将正

浏览 0提问于2021-03-19得票数 0

1回答

将多张不同大小的图片放入固定宽度的一行中，并调整高度

html、css、image、flexbox、alignment

考虑3个(或更多)图像，它们都在固定宽度的div中具有不同的大小和纵横比(例如width:100%)： <img src="1.png"> <img src="3.png">如何强制所有图像具有相同的高度和总宽度来填充容器的

浏览 1提问于2017-09-03得票数 1

1回答

OpenGL -多个设备上的相同尺寸

android、opengl-es

我想让我的正方形适合屏幕的宽度。通过将部件移动到屏幕1.6f中，正方形恰好适合屏幕的宽度。但在其他设备上，正方形变得太大，部分落在屏幕之外。怎样才能使正方形的宽度适合屏幕的宽度？

浏览 2提问于2011-07-29得票数 3

回答已采纳

3回答

如何在Unity中拉伸某些东西而不丢失纵横比？

c#、android、user-interface、unity3d

我该怎么做才能让它既不丢失宽高比，又能根据屏幕进行拉伸？

浏览 0提问于2017-10-18得票数 1

1回答

五柱网轴线不能正确缩小

html、css、fluid-layout、grid-layout

我使用的是一个最大宽度为1280px的流体网格。网格的最小宽度为950px，这是我的小提琴：缩小浏览器窗口时，最小网格(grid6)的高度与其余网格不同。Grid6在高度上比其他网格尺寸更小。

浏览 1提问于2014-04-03得票数 0

2回答

强制图像保持在高度和宽度“边界”之间，并保持纵横比。

html、css、scale

我希望将图像保持在最小和最大高度和宽度之间，同时尊重宽高比(因此，如果图像需要缩小，它将保持宽高比，直到宽度和高度参数都低于给定的max-width和max-height)。它尝试了以下css：.box { min-height: 128px; height: auto; max-width(可以通过修改max-

浏览 0提问于2019-08-19得票数 1

2回答

画布的宽度和高度要尽可能大，但要保持高宽比(JS)。

javascript、css、html、canvas

如果我有一个画布元素是一定的宽度和高度，例如。<canvas id="display" width="900" height="650" tabindex=0></canvas> 我希望将画布的宽度和高度放大到尽可能大的范围，同时将其包含在视口中，而不需要更改宽高比或增加要在画布中显示的对象的总体面积。这意味着，如果窗口为宽度2200和<em

浏览 4提问于2016-12-04得票数 0

2回答

如何自动缩放到不同的屏幕分辨率？

c#、unity3d、2d、resolution

我在unity中做了一个无限的runner，我有一个瓦片生成器/生成器，它根据屏幕的高度和宽度生成GameObjects，我设法让它与宽度一起工作，但当改变高度时，相机不会跟随，我无法做到这一点。据我所知，你可以为相机定义一个宽高比，它会自动缩放你的比例，但它会扭曲图像，看起来不是很好。由于所有这些注释，这是自动缩放2D平台游戏的最好方法(不考虑图形用户界面，只考虑GameObjects)

浏览 0提问于2014-08-06得票数 0

1回答

将视频的上半部分绘制到canvas html

javascript、html、canvas、video

我使用context.drawImage从video元素绘制到canvas，但我的相机的宽高比是4x3。因此，假设我的video的宽度为400，高度为300，然后我想将上半部分(400x150)绘制到画布上(或者中间，只要它是高度的一半就行)。我尝试的所有东西要么改变图像的宽高比，使其失真，要么以相同的4x3宽高比绘制，这意味着它将缩小到200x150，然后缩放以适合我的400x150画布，即它绘制了一半的高度，但也将宽度减少了一半。

浏览 66提问于2018-07-31得票数 0

1回答

什么定义了网页字体中的字符宽度？

html、css、typography

字体大小似乎适用于字体的“方框”的高度，据我所知，这是在字体文件本身定义的。因此，对于相同的字体大小，任何字符，无论它的视觉高度，都应该在一个相同高度的盒子里。那么，它是如何定义的呢？

浏览 0提问于2019-04-07得票数 6

回答已采纳

1回答

元视口:宽度=设备宽度或初始比例尺=1或两者兼有

html、responsive-design、viewport

对于完全响应的web设计，应该使用下列元视图声明之一：<meta name="viewport" content="initial-scale=1.0" />我想要的设计适合屏幕旋转后的设备。

浏览 2提问于2014-04-16得票数 7

回答已采纳

5回答

缩放HTML5画布宽度保持w/h宽高比

javascript、html5-canvas、aspect-ratio

我有一个尺寸为979X482px的画布元素，我想让它拉伸到适合任何给定浏览器窗口的宽度，保持宽高比为1: 1，我想让高度相对于画布的宽度缩放。关于如何使用javascript/jQuery来做这件事，有什么建议吗？

浏览 1提问于2012-05-25得票数 12

回答已采纳

1回答

长宽比锁定的Flex - Scale应用程序

apache-flex、scale、aspect-ratio

我希望能够调整我的应用程序的大小(默认情况下，通过拖动应用程序的一角来调整整个窗口的大小)。但是，我想锁定这个的纵横比，这样当我调整大小时，主窗口将保持原来的纵横比。我使用的是FlashBuilder 4.6。

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

3回答

强制css使用ratio-aspect显示图像

css

#imax {height:222px;#imax img {height:auto;如果我在宽度或高度上尝试自动，则具有不同方向的图像将在任何一种比例下产生扭曲

浏览 4提问于2010-06-20得票数 2

2回答

如何响应地在另一图像上缩放图像

html、css、image、responsive-design

我需要将图标(播放按钮)的图像放在视频的缩略图上，但它应该保持在中间(垂直和水平)，而不管窗口或设备的宽度如何，也要根据风帆的宽度进行缩放。我的图像是很好的缩放，根据窗口，但我的图标不是。我找到了许多解决方案，但它们都在px中定义了高度和宽度，这是我不想要的。我希望我的图标有一个动态的宽度和高度根据窗口的宽度。

浏览 4提问于2016-06-07得票数 1

回答已采纳

点击加载更多

css背景图像，自动缩放和裁剪填充屏幕。