Question

仅询问以下图像是否可能是静态的，而不是在缩小浏览器时对其进行扩展。

干杯。

#app-illustrations{pointer-events:none;position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;width:1287px;left:50%;margin-left:-644px;-webkit-transform:scale(.5) rotate(-12deg) translateX(50px);transform:scale(.5) rotate(-12deg) translateX(50px);-webkit-transform-origin:50% 20%;transform-origin:50% 20%}
#app-illustrations.hidden-preload{visibility:hidden}
#app-illustrations div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:38px;background:#fff;-webkit-box-shadow:inset 0 4px 7px 1px #fff,inset 0 -5px 20px rgba(173,186,204,.25),0 2px 6px rgba(0,21,64,.14),0 10px 20px rgba(0,21,64,.05);box-shadow:inset 0 4px 7px 1px #fff,inset 0 -5px 20px rgba(173,186,204,.25),0 2px 6px rgba(0,21,64,.14),0 10px 20px rgba(0,21,64,.05)}
#app-illustrations .tablet-landscape{width:512px;height:352px;margin:115px 50px 0}
#app-illustrations .phone-big{display:none}
#app-illustrations .phone-small{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;width:225px;height:467px}
#app-illustrations .tablet-portrait{width:450px;height:675px;margin-top:115px}@media (min-width:670px){
#app-illustrations{-ms-flex-wrap:wrap;flex-wrap:wrap;width:512px;margin-left:-50px;top:215px;-webkit-transform:rotate(-12deg);transform:rotate(-12deg);-webkit-transform-origin:100% 0;transform-origin:100% 0}
#app-illustrations.hidden-preload{visibility:visible}
#app-illustrations [class^=tablet]{margin:0}
#app-illustrations .tablet-landscape{width:512px;height:352px}
#app-illustrations .phone-small{width:225px;height:467px;margin:0 0 50px 176px}
#app-illustrations .tablet-portrait{display:none}}@media (min-width:880px){
#app-illustrations{width:829px;margin-left:-10px;top:20px}
#app-illustrations .tablet-landscape{-ms-flex-item-align:end;align-self:flex-end;margin-right:50px}
#app-illustrations .phone-big{display:-webkit-box;display:-ms-flexbox;display:flex;width:267px;height:553px}
#app-illustrations .phone-small{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;margin:50px 50px 0 0}
#app-illustrations .tablet-portrait{display:-webkit-box;display:-ms-flexbox;display:flex;width:450px;height:675px;margin-top:50px}}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<section id="app-illustrations" class="hidden-preload">
  <div class="tablet-landscape">
    <img alt="slack" src="img/v3/home/app-illustrations/slack.svg">
  </div>
  <div class="phone-big">
    <img alt="digitalocean" src="img/v3/home/app-illustrations/digitalocean.svg">
  </div>
  <div class="phone-small">
    <img alt="postmates" src="img/v3/home/app-illustrations/postmates.svg">
  </div>
  <div class="tablet-portrait">
    <img alt="asana" src="img/v3/home/app-illustrations/asana.svg">
  </div>
</section>

</body>
</html>

在此处下载图像-https://ufile.io/y0yj1 它们是SVG不能添加到项目中的：（

图片不在页面上，当我调整大小时显示在这里。 click me

图片扩展浏览器

0 个答案: