如何在不改变大小和比例的情况下裁剪图像的高度(React/CSS)

文章/答案/技术大牛

发布

1回答

使用css &/或jquery进行智能映像大小调整

jquery、css、image、resize

我设计了一个“网格视图”来显示我的网站上的项目。然而，因为它是完全响应的，图像不能是固定的宽度。这就是我想要达到的目标。图像不得改变比例。图像应该在裁剪框中垂直和水平地居中(溢出:隐藏)。或多或少，我试着制作图像，填充容器，但只有在不改变比例或拉伸的<em

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

2回答

javascript、css、reactjs

我尝试在CSS中裁剪此图像，以便图像填充整个容器并保持与原始文件相同的比例，而不会将图像大小更改为大于容器所需的大小。就像photoshop对裁剪工具所做的那样：在此示例中，图像大小在这两个方向上都不变，并填充容器，但图像在其Y轴上从底部到顶部进行裁剪：这里有一个视频示例：https://

浏览 27提问于2021-01-27得票数 0

3回答

如何在Bootstrap V3中将图像缩小到特定尺寸？

html、css、twitter-bootstrap、twitter-bootstrap-3

因此，我有一个大图像，尺寸为1000x250px，我想将其用作我的页面的徽标。我的问题是，如何将图像缩小到更小的尺寸，以便更好地适应布局。比如说500x80px的尺寸？希望有人能帮忙！

浏览 5提问于2014-05-27得票数 1

2回答

制作两个大小相同的列响应式图像

html、css、twitter-bootstrap、image-size

我有不同大小的图像，但想让他们在页面上看起来相同的宽度和高度。我做了什么：<div class="col-lg-6"></div>#imagesimg { padding-bottom

浏览 20提问于2016-08-12得票数 1

回答已采纳

1回答

图像的裁剪、缩放、调整大小和改变体长比之间的区别？

image-processing、image

我有一个新的任务相关的图像处理在一个网站。我太困惑于理解不同的术语与大小的图像。在以下方面有何区别：调整图像大小改变图像的纵横比特别是调整大小与比例！

浏览 0提问于2018-06-25得票数 0

回答已采纳

1回答

如何扩展SWFLoader组件以“适合”其内部任何大小的图像？

apache-flex、actionscript-3、actionscript

SWFLoader的scaleContent无法完成我想要实现的目标：当大小为100x80的图像加载到其中时，图像不会调整大小为600x400。该图像确实调整到600x400，但很明显，它完全不成比例</

浏览 3提问于2010-02-21得票数 1

回答已采纳

2回答

创建一个大小相同的响应图像库。

html、reactjs、twitter-bootstrap

我正在使用React，我正在使用引导程序创建一个大小相同的图像库。现在，我以这种方式将一些图像放到网格中。<img src=.... style={{maxWidth: "100%"}} class="img-fluid" alt="Responsive image"/> 以这种方式，我总是得到响应的图像具有相同的宽度，但不同的高度，因

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

2回答

如何使用户上传的照片大小一致

photo

我有一个网站，用户上传照片从他们的数码相机。我希望照片尽可能大，几乎占据整个屏幕。我也希望所有的缩略图，不同的用户，和放大的照片，有一个统一的大小，使设计工作在我的网站和一切布局正确。这是可能的吗，还是我会被不同大小的照片困住，因为有些人把相机在它的一侧拍照，得到一张比宽高得多的照片。图片是否需要一定的文件格式，一定的大

浏览 0提问于2011-09-06得票数 1

回答已采纳

2回答

将图像调整到特定尺寸(X到Y比)

php、post-thumbnails、images

我尝试添加我的自定义图像大小，例如：当我上传文件时，我需要调整所有图像的大小，与我定义的相同大小- Wordpress将其大小调整为'224x174‘，但我需要大小为224x226。我不需要作物图像。男人们告诉我该怎么做？

浏览 0提问于2015-10-06得票数 0

3回答

缩放图像，直到X或Y与容器相同，然后裁剪其余部分

css、image、size、crop

我在多个地方加载图像，在那里的网站主题将他们在不同的大小显示。我对CSS属性进行了试验，发现可以使用height和width参数缩放图像，使用position:relative和overflow:hidden裁剪图像。不过，我想要做的是这两者的结合。缩小图像，直到宽度为容器元素的宽度，或高度为容器元素的<em

浏览 0提问于2011-03-22得票数 5

4回答

PHP动态裁剪和调整图像大小

php、html、css

我有一个显示图片的网页，我事先不知道图片的大小。我试图使用GD函数来调整脚本的大小并裁剪来自我的图像，“就在它们显示之前，我不需要缓存”，但我失败了。我需要一个可以像这样调用的脚本或者甚至通过计算css的宽度和<

浏览 0提问于2010-01-27得票数 3

1回答

响应图像调整大小并有选择地根据一组规则裁剪它的宽度

html、css、responsive、crop、image-resizing

如果浏览器的宽度大于图像的原始宽度，则图像的宽度和高度应按比例增大(与其容器一起)，从而向下推送显示在图像下的页面内容。如果浏览器的宽度小于图像的原始宽度，则图像应该保持原来的大小而不缩小，并从两边中裁剪，直到每侧裁剪15%为止(您可以看到图像两边都有相当宽

浏览 0提问于2019-01-28得票数 1

4回答

CSS移除图像周围的空白

html、css、image、layout

我直接在我的网站上使用来自亚马逊的图片，所以我不能在图像编辑程序中手动修剪它。图像周围是大量的空白，这是令人讨厌的，因为在这个图像下，有文字。这使得图像与其下的文本之间的差距非常大(因为图像底部有空白处)。而且，每个图像都包含不同数量的空白，所以我不能仅仅设置一个固定的负margin-bottom。我知道mix-blend-mode: mult

浏览 6提问于2020-07-20得票数 0

1回答

mPDF图像覆盖页面且不失真

html、css、mpdf

我需要在一个页面上放置一个图像，A4 (210 in (h) X 297 in (w))，并具有100%的高度，即297 in，然后按比例拉伸宽度，然后裁剪溢出(即隐藏在css溢出中)。难道不可能伸展和图像以适应整个页面的高度，同时保持高宽比和裁剪图像的边？我在上见过，但还是什么也没看到。我如何才能得到一个图像100%的页面<

浏览 0提问于2018-05-12得票数 1

回答已采纳

1回答

如何使用calc (width - X)保持图像比例

image、css、image-resizing

我知道仅以百分比指定宽度或高度将允许图像保持其正确的比例，但是，似乎如果我尝试如下操作：我失去了这个比例。图像将变窄60px。有没有人知道如何使用CSS或者一些轻量级的js，在使用计算单元的同时保持正确的比例？最终目标是让一个大的(包括每页上的大部分内容) div中的</e

浏览 0提问于2013-02-01得票数 1

回答已采纳

1回答

在python中缩放和裁剪图像，而不超过图像尺寸

python、python-imaging-library、crop、image-scaling

我正在使用python剪切图像。假设我的形象是这样的：这是我用于裁剪的简单代码片段：im = Image.open(image)cropped_image.save("Out.jpg") 我想缩小这个裁剪的图像<

浏览 1提问于2019-05-27得票数 1

回答已采纳

1回答

如何强制宽高比而不是大小- css

css、image

有没有办法，在css中，自动裁剪图像，使其适合和纵横比，而不是强迫它到特定大小的div。我有一个带有一些缩略图的页面，这些缩略图是动态生成的，并在顶部包含一个图像和一些文本，然后它们在屏幕上以行的形式显示。图像大小上的微小差异可能会导致图层混乱。当我接受用户图像时，我想接受一个大小的范围，大约

浏览 1提问于2016-12-06得票数 0

2回答

在HTML5和css中调整图像大小并剪切图像

html、css、responsive-design、resize-crop

我的要求- 然而，我觉得我这样做很乏味，而且在CSS和/或jQuery中有一些非常简单的</em

浏览 2提问于2013-12-19得票数 4

回答已采纳

2回答

在div之外显示背景图像

html、css、background

在上面的链接中，背景中有一片叶子一直延伸到身体的中间！我想要的是将整个图像分为三个部分。页眉、内容&最后是页脚。我裁剪了标题所需的部分，但问题是leafs给了背景图像600px的高度。标题的高度是150px，所以背景的多余部分被隐藏了。我尝试在CSS中显示Overflaw，但它不起作用。如何在不改变标题div高度<em

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

回答已采纳

4回答

Wordpress图像未正确裁剪

images、cropping

我的贴图缩略图设置如下： set_post_thumbnail_size(1280, 436, true); 它们被调整为具有以下css的两列： height: auto; 它们所显示的列大约为问题是，当我上传一个尺寸小于600x339的<

浏览 0提问于2015-06-19得票数 0

回答已采纳

点击加载更多

使用css &/或jquery进行智能映像大小调整