div内の画像で縮小する

divの中には画像しかありません。イメージはdiv内のスペース全体を通常通りにとり、divとimageの両方が同じ高さになります。ウィンドウが縮小されている場合を除いて、イメージはサイズを調整して応答するが、divは同じ高さを維持する。 divを常にその内部のイメージと同じサイズにするにはどうすればよいですか？div内の画像で縮小する

出典

2017-03-02 Anonymous

を支援します。

CSS

#ProductPhoto { 
    display: inline-block; 
    overflow: hidden; 
    max-width: 364px; 

} 
.photo { 
    position: relative; 
    display:block; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

HTML

<div data-scale="1.7" class="product-single__photos tile col-md-8" id="ProductPhoto">  
      <img class="photo" src="//cdn.shopify.com/s/files/1/1698/6183/products/DSC_0345_123483_large.jpg?v=1486835408" alt="Another Skirt" id="ProductPhotoImg"> 
</div>

DEMO HERE

出典

2017-03-02 10:07:15

私は写真が私が持っている別の効果のために絶対的に配置される必要があります。 –

親のdivを展開するには、子も親戚にする必要があります。 –

divの画像は、幅が100％に設定されていないdisplay: inline-blockのプロパティを持つ必要があります。

そして、なぜあなたは使用しない：その画像上

background-repeat: no-repeat; 
background-position: center; 
background-size: cover;

を？

#ProductPhotoにheight: 100%;は必要ありません。なぜなら、とにかくコンテンツの高さがあるからです。

出典

2017-03-02 10:05:41 Plenarto

jsでやってみましたか？ PICの高さを取る：

var pic_height = $('.photo').outerHeight();

PICの高さのdivあなたのPICコンテナ与えたより：

$('#ProductPhoto').height(pic_height);

ホープこれはあなたが望むものを達成するための相対位置を使用することができます

出典

2017-03-02 10:06:02

divの高さは常にその内容に依存しているので、100％は動作しません身長、

height: auto

の代わりに使用してみてください高さ：100％

出典

2017-03-02 10:07:35

答えて

関連する問題