时间戳

首页 > 解决方案 > 将全尺寸图像的大小和比例与 SVG 视图框匹配

html - 将全尺寸图像的大小和比例与 SVG 视图框匹配

问题描述

我有一份团队成员名单。每个成员元素都由一个在白色框内裁剪成圆形的图像组成。当您将鼠标悬停在框上时，图像将变为全尺寸。它的灵感来自这个网站：

在此处输入图像描述 在此处输入图像描述

我用 SVG 实现了同样的动画。然而，在上面的网站中，每张图片都是 300X350 - 与白色容器盒的大小相同。这创建了从蒙版图像到全尺寸图像的完美过渡——似乎没有任何东西跳跃或移动。另一方面，我的图像有多种尺寸。结果，SVG 的可见部分要么放大要么缩小图像，当您悬停时，整个图像似乎会跳跃：

在此处输入图像描述 在此处输入图像描述

在此处输入图像描述 在此处输入图像描述

如何使全尺寸图像的比例和大小与 SVG 视图框中的大小相匹配，使其看起来不会移动？

JSFiddle：http: //jsfiddle.net/mzechar/afnxkt2h/2/

html:

 <li>
            <a href="#">
              <article>
                <div>

                  <!-- The masked image -->
                  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
                        <defs>
                                <clipPath id="circle">
                                        <circle cx="50" cy="50" r="35"/>
                                </clipPath>
                        </defs>
                        <image width="100%" height="100%" preserveAspectRatio="xMinYMin slice" xlink:href="team/finishedBW/CCK.jpg__.jpg" clip-path="url(#circle)"/>
                </svg>
                </div>

                <!-- The full revealed image -->
                <img class="img-full" src="team/finishedBW/CCK.jpg__.jpg" alt="">

                <!-- The circle ring -->
                <svg viewBox="0 0 100 100" class="circle-ring">
        <circle cx="50" cy="50" r="35" stroke="white" stroke-width=".5" fill="transparent" />
    </svg>

                <div class="bio">
                  <h2>Chun-Kang Chen</h2>
                  <h4>Article Subtitle</h4>
                </div>
              </article>
            </a>
          </li>
          <li>

CSS：

.team-listing{
    position:relative;
    margin-top:40px;
    margin-right:auto;
    margin-left:auto;
}

.team-listing li{
    display:inline-block;
    overflow: hidden;
    float:left;
    height: 340px;
    list-style-position:inside;
    margin: 1px 1px 1px 1px;
    background-color:#fff;
}

.team-listing ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    flex-flow: row wrap;
    flex-shrink: 1;
    flex-grow: 1;
    float: left;
    min-width: 0;
    max-width: 100%;
    position: relative;
    filter: drop-shadow(5px 5px 5px rgba(2,2,22,0.1));
}

a {
  display: inline-block;
}

article {
  position: relative;
  width: 300px;
  height: 350px;
  /* prevent scaled circle ring from triggering hover */
  overflow: hidden;
}


/* create the colour overlay */
article:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background: rgba(0, 255, 255, .2);
  z-index: 3;
}


/* place full image above SVG */
.img-full {
  position: absolute;
  top: 0;
  right:0;
  z-index: 2;
  /* hide the full image initially */
  display: none;
}

.circle-ring {
  position: absolute;
  top: 0;
  z-index: 3;
  /* initially hidden with opacity so it can be animated */
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(1.8);
  transition: transform .3s ease, opacity .4s ease;
}

a:hover .img-full,
a:hover article:after {
  position:absolute;
  display: block;
}

a:hover .circle-ring {
  opacity: 1;
  transform: scale(1);
}

.bio {
  position: absolute;
  bottom: 0;
  padding: 1rem 2rem;
  color: #000;
  /* keep text above SVG, full image and overlay */
  z-index: 4;
}

a:hover .bio {
  color: #FFF;
}


/* general */
h2,
h4 {
  margin: 0;
  font-family: sans-serif;
}

h4 {
  font-weight: 300;
}

标签： htmlcsssvgscale

解决方案

裁剪你的图像，扔掉那些无用的标签，每张图像只使用一次。希望这可以帮助：

section.team {
  margin: auto;
  background: #fefefe;
}

.team-listing {
  position: relative;
  margin: 40px auto 0;
  display: flex;
  filter: drop-shadow(5px 5px 5px rgba(2, 2, 22, 0.1));
}

.team-listing li {
  overflow: hidden;
  height: 350px;
  list-style: none;
  margin: 1px;
  background-color: #fff;
}

article {
  position: relative;
  top: 0;
  width: 300px;
  height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-full {
  -webkit-clip-path: circle(30% at 50% 50%);
  clip-path: circle(30% at 50% 50%);
  width: 500px;
}

a:hover .img-full {
  -webkit-clip-path: none;
  clip-path: none;
  filter: sepia(100%);
}

.circle-ring {
  position: absolute;
  top: 0;
  z-index: 3;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(1.8);
  transition: transform 0.3s ease, opacity 0.4s ease;
}

a:hover .circle-ring {
  opacity: 1;
  transform: scale(1);
}

.bio {
  position: absolute;
  bottom: 0;
  margin: 2rem;
  color: #000;
}

a:hover .bio > h2 {
  color: #fff;
}

h2,
h4 {
  margin: 0;
  font-family: sans-serif;
}

h4 {
  font-weight: 300;
}
<section class="content-wrapper team">
  <ul class="team-listing">
    <li>
      <a href="#">
        <article>
          <img class="img-full" src="https://i.imgur.com/6eRLJ4I.jpg" alt="">
          <svg viewBox="0 0 100 100" class="circle-ring">
              <circle cx="50" cy="50" r="35" stroke="white" stroke-width=".5" fill="transparent" />
          </svg>
        </article>
        <div class="bio">
          <h2>Article Title</h2>
          <h4>Article Subtitle</h4>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <article>
          <img class="img-full" src="https://i.imgur.com/6eRLJ4I.jpg" alt="">
          <svg viewBox="0 0 100 100" class="circle-ring">
                  <circle cx="50" cy="50" r="35" stroke="white" stroke-width=".5" fill="transparent" />
              </svg>
        </article>
        <div class="bio">
          <h2>Article Title</h2>
          <h4>Article Subtitle</h4>
        </div>
      </a>
    </li>
  </ul>
</section>

推荐阅读