Question

如何使图像比原始尺寸更大，并在x和y方向保持响应式设计？

我使用此代码使其响应。效果很好，我只想让图像达到当前高度的120％。

display: block; max-width: 100%;

查看fiddle。

Answer 1

以下是您可以做的一个示例。

＆＃13;

.container{

  background: #ccc;
  width: 80%;
  margin: 10%;
  position: relative;

}

.img-container{
  
  background: #f00;
  width: 100%;
  position: relative;
  
}

.img-container img {
  width: 120%;
  margin-left: -10%;
  
  background: #0f0;
}

＆＃13;

<html>
 
  <body>
  
    <div class="container">
      
      <p>Typewriter chia heirloom retro pickled 90's. Lo-fi neutra live-edge letterpress. Street art try-hard cold-pressed vinyl stumptown tacos. Post-ironic yr swag food truck, pour-over sartorial live-edge pork belly hell of truffaut blue bottle whatever beard. Intelligentsia succulents flannel art party, air plant try-hard roof party tilde. Kinfolk listicle iPhone biodiesel. Stumptown organic chambray umami ramps fashion axe intelligentsia, 90's leggings.</p>
      
      <div class="img-container">
        
        <img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fhigh-resolution-photos.com%2Fstock_photos%2Froyalty_free_3.jpg&f=1">
        
        
      </div>
      
      <p>Typewriter chia heirloom retro pickled 90's. Lo-fi neutra live-edge letterpress. Street art try-hard cold-pressed vinyl stumptown tacos. Post-ironic yr swag food truck, pour-over sartorial live-edge pork belly hell of truffaut blue bottle whatever beard. Intelligentsia succulents flannel art party, air plant try-hard roof party tilde. Kinfolk listicle iPhone biodiesel. Stumptown organic chambray umami ramps fashion axe intelligentsia, 90's leggings. <a href="https://hipsum.co">Text from Hipster Ipsum</a></p>
      
    </div>
    
  </body>
  
 </html>

＆＃13;

<强> Modivation

我们希望图像比容器大20％。因此，我们需要做两件事。

创建一个环境，以便我们可以看到整个图像。这是拥有容器的理由。请注意，它是屏幕宽度的80％。
为图像创建100％的参考值以缩小。在这种情况下，它将是图像容器。请注意，它会填充整个容器div。

现在设置了这两件事，我们可以创建一个图像，使其自身比原来的大20％，同时响应屏幕的大小（而不是它周围的div）。

如果您更进一步，可以添加一个限制图像大小的媒体查询。

@media all and (min-width: 600px) {
  .img-container img {
    max-width: 480px;
  }
}

Answer 2

你可以使用transform css函数，它可以为宽度和高度两个参数设置一个参数，首先是宽度和第二个高度。（1.2 == 120％）

transform: scale(1.2); /* Standard syntax */
-ms-transform: scale(1.2); /* IE 9 */
-webkit-transform: scale(1.2); /* Safari */

此功能可从中心缩放元素。所以我想你会很高兴使用它。

here也是一篇很好的文档，介绍了您可能想要阅读的规模和其他css可用变换。

在重新使用时保持图像的原始尺寸的120％

2 个答案: