调整各种大小的风景图像的大小以适合固定肖像和圆形框架
我有数十幅不同大小的风景图像：522 x 393、496 x 473、428 x 336、359 x 240 .... etc等。
我想将它们显示在具有圆形裁剪效果（在悬停时变成圆形边框）的纵向框架（300 x 340）中。灵感is from here：
但是，我的图像之间没有一致的尺寸。我遇到的主要问题之一是，将鼠标悬停在某些框上时，名称和标题会显示在图像上。但是在一些不够高的图像上，名称和标题会显示为黑色（保留图像的元素的默认背景）。如果我将太小的图像完全向下推，以使名称/标题始终出现在照片的顶部，则脸部通常不在圆圈裁剪范围内。我不知道如何调整照片大小以致于：
- 名称和标题的背景在悬停时是一致的（照片背景或黑色填充背景）
- 脸部在圆形作物内。
View my js fiddle here HTML：
<div class="team-listing">
<ul>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/nkzsc7n9d/Aman.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/nkzsc7uz5/CCK.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/6x8a9vktt/Yin.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/5i6pl19f5/Emma.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/jomgge2bl/Yu-_Wei.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/gujb2tptt/Gaurav.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/fs94k8wpt/Guangyu.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/ubg9lo5a9/Ila.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/a42ttdn8h/Ivy.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/3qdqq3v75/Jacky.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/6kgw3kcsx/Jian.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/4fwj2idr5/Joseph.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/hwthldgcx/Neeraj.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/7mr2m5lch/Paul.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/n88e6450h/Peiti.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/8djssdqf5/image.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/sjnaqx6jl/Yu.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/3qdqq6v81/Priyank.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/55fbewold/Qi.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/oaikorb01/Sean.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/4354wfaxt/Yi.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/daxdd2zzl/Steve.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/yxcdu4dzl/Vinay.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/vqhuahltt/Vincent.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/agu7zo0e9/Wei.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/4fwj2l629/Weikang.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/atlm5u38h/Wei_An.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/epyy1v68h/Wenxin.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
</ul>
</div>
1 个答案:
答案 0 :(得分：0)
正如@Paulie_D所提到的，最好的（也是通常的标准）情况是裁剪照片以使面孔具有一致且相似的位置，这将有效地解决您的两个问题。除非如此：
使用圆进行一些创造性的定位并使用一些溢出容器，可以相对直接地定位文本。但是，您面临的主要问题是将面孔作为重点。有一些面部识别API可以让您找到面部的大致中心，例如Face-API.js和Tracking.js。这些操作使您可以将图像相对定位在圆形蒙版后面，并固定在其脸部中央。
但是，您可以看到问题所在。任何它不认识的面孔都需要后备或替代，更不用说学习新的库了（我认为这不一定是坏的事情）。
老实说只拥有26张照片，如果您只花了5分钟就可以将它们变得更好，并获得更一致的结果。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？