Question

所以我试图使用调整大小条来拉伸图片而不改变它的大小。如果可以，如果我能以某种方式保持宽高比也会有所帮助。我一直在寻找几天并尝试一些不同的东西。我是一个自学成才的HTML。 :(有人可以指导我吗？

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<style>
body{
text-align:center;
}
.asd{
    width:500px;
    overflow:auto;
    resize:both;
}
.qwer{
    background-color:blue;
    width: 100%;
    height:100%;
}

.asdf{
    display:block;
}

</style>

</head>

<body>
<div class="asd">
  <div class="qwer">
    <div class="asdf"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQNn0ZQI8Xa1XrrCNdvIxslsIiIC67HmV6BxVTTgIhEPehwsDU7" width="225" height="225" /></div>
  </div>
</div>
</body>
</html>

Answer 1

<强>观

我不是100％确定你想要实现什么，但如果你正在寻找一种方法来制作某种图像缩放器 - 这就是我接近它的方法。

你需要一个绝对定位的图像和一个相对定位的div。

图像位于div内部，它充当剪辑蒙版。这给你带来了两个好处：

您可以通过调整div尺寸
您可以根据需要拉伸img标签。

基本示例

所以就示例代码而言 - 非常基本。

<style>
    .parent { 
       position: relative;
       width: 200px;
       height: 200px;
       background: yellow;
       margin: 40;
       /* THIS IS THE KEY */
       overflow: hidden;
     }
     .child {
         position: absolute;
         top: -10px;
         left: -10px;
         width: 100px;
         height: 100px;
         background: red;

     }
</style>

<div class="parent">
    <img class="child" src="kitty.png" />
</div>

如果拉伸是动态的 - 即。我可以改变，然后你现在可以使用javasript来改变图像的{left, top}和{width, height}来实现拉伸效果。

如果它应该是静态的 - 总是一样 - 你可以在css中设置参数。

拉伸固定尺寸内容

1 个答案: