2017-01-13 8 views
0

毎回設定された場所に画像を設定し、サイズを特定のサイズに設定する方法を知りたいです。これは私が持っているものですが、私はまだ大きな画像を取得し、画像はコンテナの上に表示されます。私はイメージのタグにスタイルを変更しようとしましたが、私はまだ同じ問題を誰かが私を助けてくれるのですか?コンテナ内の特定の場所に画像を設定する

<div id="fotos" class="bananas" style="position: absolute;top: 100px;right: 108px" height="80px" width="80px"><img class="modal-content" id="imgdisplay" /> 

答えて

1

あなたのイメージdisplay:block;を付け、その後、彼らのためにwidthを指定します。あなたはpxと%でそれを行うことができます。

設定場所はイメージ上でposition:absolute;を使用した場合、.bananasposition:absoluteを指定したため、位置は.bananasに設定されません。

.bananasposition:relative;に変更する必要があります。以下の例を参照してください。

.bananas{ 
 
    position:relative; 
 
    border:1px solid red; 
 
    height:160px; 
 
    width:100%; 
 
} 
 
.bananas img{ 
 
    display:block; 
 
    width:150px; 
 
    margin:0; 
 
    padding:0; 
 
    position:absolute; 
 
    top: 30px; 
 
} 
 
#imgdisplay1{ 
 
    left:10px; 
 
} 
 
#imgdisplay2{ 
 
    left:170px; 
 
}
<div id="fotos" class="bananas" > 
 
    <img class="modal-content" id="imgdisplay1" src="http://images.financialexpress.com/2015/12/Lead-image.jpg"/> 
 
    <img class="modal-content" id="imgdisplay2" src="http://images.financialexpress.com/2015/12/Lead-image.jpg"/> 
 
</div>

+0

私は複数の画像をアップロードし、それらがドラッグ可能な操作を行うたびに同じ正確な場所に表示されるようになるのはどうでしょうか?今は画像をアップロードするたびに、画像はアップロードされた画像の下にアップロードされ、4回アップロードすると消滅します。 – user7368271

+0

大丈夫ですが、通常のコンテンツフローからその要素を削除するということです。最初のイメージに 'left:10px'がある場合、2番目に' left:160px; '以上が必要です。私はそのための私の例を更新しました。 – ab29007

+0

動的コンテンツ条件で絶対値を使用することは悪いことかもしれません。あなたのコンテンツが変更されないことを知っているときは、絶対を使用してください。 – ab29007

0

私は、TIは、設定された場所にされた「場所を設定し、」場所によって異なり

たびに画像を設定する方法を知りたいと思います。一般に、position: absolute;またはposition: fixed;top bottom left rightを使用すると、非常に特定の位置に要素を配置できます。

サイズを特定のサイズに設定します。

これは、widthheightで行い、探しているユニットを使用します。 px em % vh vwなど

関連する問題