1

所以我试图使用调整大小栏拉伸图片而不改变它的大小。如果可以的话，如果我也能以某种方式保持纵横比，也会有所帮助。我一直在寻找几天并尝试了很多不同的东西。我是一个自学的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>
4

1 回答 1

0

主意

我不是 100% 确定您到底想要实现什么，但如果您正在寻找一种方法来制作某种图像调整器 - 这就是我将如何处理它。

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

图像位于 div 内，用作剪辑蒙版。这为您带来 2 个好处：

  1. 您可以通过调整 div 大小轻松控制可见尺寸
  2. 您可以随意拉伸 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}and{width, height}来实现拉伸效果。

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

于 2013-08-11T16:03:35.280 回答