如何阻止Logo在窗口调整大小时改变尺寸？

我的代码 #

HTML代码 #

<section class="top_card">
  <header>
    <h1>NEWS<img src="./img/LOGO.svg" alt="Logo"></h1>
  </header>
</section>

CSS代码 #

.top_card h1 {
  transform: translate(0%,-20%);
  font-size: 3.4rem;
}
.top_card h1 img { /*ORF Logo*/
  width: 20%;
  transform: translate(0%,26%);
}

问题描述 #

调整屏幕尺寸时，Logo（img元素）会随之缩小。尝试添加min-width:20%但并未生效，想请教如何阻止这种情况发生？该问题是否可能是因为Logo为SVG格式而非JPG/PNG格式导致的？

解答 #

为什么min-width:20%不生效？ #

你设置的width:20%和min-width:20%都是相对于父元素<h1>的宽度。当屏幕缩小，<h1>的宽度会跟着内容或屏幕宽度收缩，20%的比例值也会同步变小，所以min-width:20%根本起不到限制最小尺寸的作用——它只是要求Logo宽度不能小于父元素当前宽度的20%，而父元素本身在缩小。

和SVG格式无关 #

SVG是矢量图，缩放时不会失真，但它的尺寸控制逻辑和JPG/PNG完全一致，这个问题和图片格式没有关系。

解决方法 #

要阻止Logo随屏幕缩小到某个尺寸以下，需要给Logo设置固定单位的最小宽度，比如像素（px）或视口单位（vw）：

方法1：设置固定像素的最小宽度

.top_card h1 img {
  width: 20%;
  min-width: 100px; /* 根据需求调整这个值 */
  transform: translate(0%,26%);
}

这样当父元素宽度的20%大于100px时，Logo按20%显示；当父元素缩小到20%宽度不足100px时，Logo会保持100px的最小宽度。

方法2：结合视口单位限制

如果想让最小宽度适配不同屏幕，可以用视口宽度单位vw：

.top_card h1 img {
  width: 20%;
  min-width: 8vw; /* 比如设置为视口宽度的8%作为最小限制 */
  transform: translate(0%,26%);
}

额外提示：限制父元素<h1>的最小宽度

如果希望<h1>本身不随屏幕过度缩小，也可以给<h1>设置最小宽度，间接保证Logo的最小尺寸：

.top_card h1 {
  transform: translate(0%,-20%);
  font-size: 3.4rem;
  min-width: 500px; /* 固定最小宽度 */
  /* 或者用视口单位 */
  /* min-width: 40vw; */
}
.top_card h1 img {
  width: 20%;
  transform: translate(0%,26%);
}

内容的提问来源于stack exchange，提问作者user22823558