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}とを変更し{width, height}、ストレッチ効果を実現できます。

静的にする必要がある場合 (常に同じ)、css でパラメーターを設定するだけです。

于 2013-08-11T16:03:35.280 に答える