Question

我有两个不同尺寸的svg图形，但内容相对较适合，请参阅以下示例：

目标

我搜索一个解决方案，保留两个svg之间的比率，同时将两个图像都放在“固定帧”中。

问题

以下示例显示左侧人员“变大”，因为svg小于右侧人员的svg，并且可以在fxied frame（max-width and max-height 100%）内增长更多

我无法更改svg文件（即视图框），因为它们已加载到画布上并在那里工作。

这两个SVG只是一个例子，还有很多其他SVG的大小和比例不同。

的jsfiddle

我准备了一个小提琴来玩，并尝试可能的解决方案：https://jsfiddle.net/e6hs4w3s/

Answer 1

我知道您正在寻求严格使用CSS，但作为（潜在的）后备，您可以使用JavaScript来调整较小的svg，基于较大svg的计算高度/自然高度的比率。

这是根据所需比例调整较小img大小的行：shortImg.height = shortImg.naturalHeight * (tallImg.height / tallImg.naturalHeight);

var images = document.querySelectorAll('.Tile');
var img1 = images[0];
var img2 = images[1];

if (img1.naturalHeight > img2.naturalHeight) {
  tallImg = img1;
  shortImg = img2;
} else {
  tallImg = img2;
  shortImg = img1;
}

shortImg.height = shortImg.naturalHeight * (tallImg.height / tallImg.naturalHeight);

.Box {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: grey;
  vertical-align: bottom;
}

.Tile {
  max-width: 100%;
  max-height: 100%;
}

<img src="http://imgh.us/lay.svg" />
<img src="http://imgh.us/heart_23.svg" />

<hr />

<div class="Box">
  <img class="Tile" src="http://imgh.us/lay.svg" />
</div>

<div class="Box">
  <img class="Tile" src="http://imgh.us/heart_23.svg" />
</div>

Answer 2

为坐着的人使用更合适的<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles/style.css"> <title>DateNight Table 1 x 3</title> <link href="https://fonts.googleapis.com/css?family=Clicker+Script|Raleway" rel="stylesheet"> </head> <body> <div class="info-table"> <div id="table-1" class="table-display"> <img src="images/search_transparent.png" alt=""> <h1 class="blue-title"> Best Babysitters in Town </h1> <p class="blue-text"> We are serious about having only amazing babysitters on our roster. They've all been Skype interviewed by a parent, have 1-2 years of experience and can provide 2 childcare-related references. Our parent approval rate is through the roof. University and College students, long-time babysitters, ECE students. Only the best. </p> </div> <div id="table-2" class="table-display"> <img src="images/search_transparent.png" alt=""> <h1 class="white-title"> This is Easy </h1> <p class="white-text"> We're parents, too. We know how short on time you are. DateNight gives parents a small pool of great candidates from which to select a babysitter. Don't pay a small fortune to access a huge list of mediocre resumes. Join DateNight and have 3 interviews in 10 minutes. Odds are - you'll love all 3 candidates. </p> </div> <div id="table-3" class="table-display"> <img src="images/search_transparent.png" alt=""> <h1 class="blue-title">Safer for Everyone</h1> <p class="blue-text"> Parents want to decide who is babysitting for their kids. With us, you'll have all the necessary elements they need to make an informed decision on childcare - an interview, reference info and relevant babysitter experience. Babysitters are people's kids, too. Ws protect babyistter safety by not revealing their full identity online until they have agreed to meet a family. Everyone deserves to be safe. </p> </div> </div> </body> </html> .info-table { margin-top: 10px; display: table; width: 100%; margin-top: 100px; text-align: center; overflow: hidden; font-family: 'Raleway', helvetica, sans-serif; } .table-display { display: table-cell; height: 300px; padding: 1em; width: 33.3%; } img { width: 6em; height: 6em; } #table-2 { background-color: #000039; } h1 { text-align: center; } p { text-align: justify; } .white-title, .white-text { color: #ffffff; } .blue-title, .blue-text { color: #000039; } @media (max-width: 767px) { .table-display { display: table; width: 100%; } .info-table { display: table-cell; width: 100%; padding: 3em; } p { text-align: justify; vertical-align: middle; } }。使viewBox y和height组件与常备SVG中的组件匹配。

在你的情况下，“站立”SVG有一个viewBox y = 0和height = 367。 “坐”SVG的高度= 269。

如果你坐着的那个也有一个367的viewBox高度，那么两者的比例就会匹配。但是，您还需要更改其viewBox的y组件 - 否则它将位于SVG的顶部而不是底部。所以我们将y分量设置为（269-367）来纠正它。

viewBox

viewBox="0 -98 230.31494 367"

.Box {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: grey;
}

.Tile {
  max-width: 100%;
  max-height: 100%;
}

Answer 3

如何使用简单的基于百分比的边距和大小来相应地在固定容器内缩放svg图像？

以下是我提出的建议：

<div class="box">
  <img class="tile left" src="https://imgh.us/lay.svg" />
</div>

<div class="box">
  <img class="tile right" src="https://imgh.us/heart_23.svg" />
</div>

CSS：

.left {
  margin-top: 20%;
  margin-left: 25%;
  height: 80%;
  width: 75%;
}

.right {
  height: 100%;
  margin-right: 25%;
  width: 75%;
}

.box {
  float: left;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: grey;
}

当然，您可以根据自己的喜好更改百分比。干杯！

在固定Div（CSS和JS）内相对缩放Svg

3 个答案: