Question

我知道可以简单地通过img = cv2.dilate(img, kernel, anchor=(0, 0))来设置HTML图像的width和height属性。我要寻找的是是否存在一个CSS属性，该属性仅在<img src="Debian.jpg" style="height: 120px; width: 130px">中采用一个值，并根据该%缩放原始图像的宽度和高度。例如，如果%的高度和宽度为Debian.jpg，并且我在该CSS属性中指定了1000x700，则图像会缩小为50%，因此可以保持宽高比。对于我来说，很难在分别调整高度和宽度的同时保持图像的纵横比。如果不存在这样的属性，那么有什么办法可以保持宽高比并实现所需的图像尺寸？

Answer 1

是的，有一种方法可以保持图像的纵横比并将图像调整为原始尺寸的一小部分。但是，CSS无法知道图像的固有尺寸（原始尺寸）。因此，您只能做两件事：

明确告诉CSS原始大小
使用JS在加载图像时获取原始大小

什么不起作用

将百分比值用作width的{{1}}值是行不通的，因为百分比值可以解析为其容器大小的百分比，而不是其容器的容器大小。 strong>原始大小。下面，我演示了不起作用的示例。

话虽如此，我个人通常还是希望明确指定图像的宽度。例如，在大型设备上，我希望图像为1080px。在较小的设备上，我希望图像为560px。我可以简单地为显式尺寸的图像制作一个容器，将图像放置在容器内，然后将图像的宽度指定为容器尺寸的100％。

什么有效

如上所述，有两种方法可以使图像占其原始宽度的50％。首先，使用JS。其次，明确告诉CSS原始图像宽度。

使用JS方法，您只需要更改图像的宽度。加载后，获取图像的固有宽度，然后将新宽度设置为固有宽度除以2。简单。
显式使用CSS-telling方法不太有利。该解决方案假定图像将始终相同，并且开发人员需要您事先知道原始图像尺寸。更改原始图像大小时，还需要更新代码。话虽这么说，您可以通过在CSS类中指定一个CSS custom property，指定一个属性（使用HTML格式）来提供固有宽度，然后使用attr()（仍处于实验性，并且大多数不受支持）来实现此目的，或者使用intrinsicsize attribute and set the width and style through CSS（仍处于实验阶段，不受支持）。如上所述，后两种解决方案不受大多数浏览器支持，并且可能无法正常运行。

我认为，最好的方法是使用JS将图像的宽度设置为其固有宽度的50％。这里是一个解决方案，展示了什么都行不通的解决方案和JS解决方案。如果仅更改图像的大小（宽度/高度）之一，则纵横比将自动保持。

img

const imageJS = document.querySelector('.image--changed-with-js')

imageJS.onload = () => {
  const intrinsicWidth = imageJS.width
  imageJS.width = imageJS.width / 2
}

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0px;
}

img {
  margin: 20px 0;
}

/* Image has its intrinsic size (i.e. the original image size) */
.image--original {
  width: auto;
}

/* Image contained within a 500px container
 Image has a width of 50% of 500px = 250px */
.container {
  width: 500px;
}

.image--changed-with-container {
  width: 50%;
}

/* Image is not contained within a div
However, image is inside body
<body> is its container
It now has a width of 50% of the body
NOT 50% of its intrinsic width */
.image--changed-without-container {
  width: 50%;
}

/* Image changed using JS
You can get the intrinsic size through JS and modify its size there */
.image--changed-with-js {}

Answer 2

如果将宽度设置为固定的像素数，例如img { width: 500px; }，高度将相应调整以保持相同的宽高比。如果设置了高度，则宽度将相应调整以保持相同的宽高比。

如果您将宽度设置为百分比，例如img { width: 50% }，浏览器将假设您的意思是元素容器的百分比。高度将相应调整以保持相同的长宽比。

但是，如果您将高度设置为百分比，例如img { height: 50% }，由于种种原因而无法使用。

Answer 3

解决方案非常简单。要保留长宽比，您需要做的就是设置CSS的高度和宽度属性，例如：

elem = document.getElementById("current");
elem.innerText = "Current selection: " + c.replace(/(^\w|\s\w)/g, m => m.toUpperCase())

#theImage {
  width: 100%;
  height: auto;
}

通过将width属性设置为100％，您是在告诉图像占用所有可用的水平空间。将height属性设置为auto时，图像的高度与宽度成比例地变化，以确保保持宽高比。最终结果是图像可以完美缩放。

该解决方案的缺点是，单个图像无法在可以查看您的内容的分辨率范围内有效显示。 要获得更全面的解决方案，您需要引入媒体查询和大小不同的图像，以在适当的时候替换分辨率较低的图像

Answer 4

我的建议是删除您放置的指定尺寸。是的，可以在CSS中指定一个代码。在html中这样做：

<img src="Debian.jpg" alt="Debian Image" class="myCustomImages">

在CSS中执行以下操作：

.myCustomImages {
  max-width: 50%;
  max-height: 50%;
}

Answer 5

据我所知，您想在以原始尺寸的百分比定义其比例的同时保持图像的宽高比。以下是我的建议：

当图像位于带有display: inline-block的容器中时，您可以在CSS中定义图像的宽度，该宽度将相对于自身（如果父对象具有display: block，则相对于自身是父级，如果是display:inline，则相对于最近的块级父级。

当您定义一个尺寸（width或height）而不是另一个时，默认情况下，它会保持宽高比。

因此，我建议将图像包装在inline-block父级中，并仅以百分比定义宽度。像这样：

div {
  display: inline-block;
}
#half {
    width: 50%;
}
#original {
    width: 100%;
}
#big {
    width: 150%;
}

<h1>Image 400X267</h1>
<h3>50% size</h3>
<div>
<img id="half" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/>
</div>
<h3>100% size</h3>
<div>
<img id="original" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/>
</div>
<h3>150% size</h3>
<div>
<img id="big" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/>
</div>

以％缩放HTML图像的宽度和高度

5 个答案:

什么不起作用

什么有效