![](/img/trans.png)
[英]Parent div, height not set, over-sizes height by a few pixels to fit child img element height? Why?
[英]How to fit IMG in parent DIV where its height is not set?
我有這種情況:我想使IMG高度適合其未設置高度的父DIV。 這是示例代碼:
.box_NewsList { width: 100%; background: #ffa; overflow: hidden; display: inline-block; } .box_NewsList>img { height: 100%; display: inline-block; } .box_NewsPreview { padding: 15px; width: auto; } .box_NewsPreview>.tit_News { font-size: 1.5rem; line-height: 1.5rem; position: relative; margin: -15px 0 15px; padding: 15px 0 0; background: transparent url(../imgs/main_menu_hover.png) no-repeat top left; }
<div class="box_NewsList"> <img class="pull-left" src="mypicture.jpg"> <div class="box_NewsPreview"> <h1 class="tit_News">MyTitle</h1> <div class="txt_Abstract"> <p>Long text abstract here</p> </div> <button class="btn btn-default btn-rounded pull-right">READ</button> </div> <div class="clear"></div> </div>
如何使用box_NewsPreview
類使img的高度適合div的高度?
.box_NewsPreview>.txt_Abstract p{color:#7e7e7e;font-family:Roboto, sans-serif;font-size:1rem;font-weight:300;text-align:justify;}
如果我在box_NewsList
添加一個高度值,例如height:300px;
它工作正常。
如果我設置height:auto
, height:initial
, height:inherit
或在該類中未添加任何高度值,那么我將獲得全尺寸的IMG而不是調整其父高度的大小。
嘗試
<div class="box_NewsList">
<div class="box_NewsPreview">
<img class="pull-left" src="mypicture.jpg" stretch="fill">
<h1 class="tit_News">MyTitle</h1>
<div class="txt_Abstract"><p>Long text abstract here</p></div>
<button class="btn btn-default btn-rounded pull-right">READ</button>
</div>
<div class="clear"></div>
</div>
看來<img>
在news_list而不是news_preview中。
我在img中添加了Stretch,所以無論它總是拉伸到div的大小都是一樣的:)
我認為實現您想要的最簡單的方法是使用一些jQuery。 我認為純CSS不可能
我舉了一個例子,說明我的position: relative;
在.box_NewsList
和position: absolute;
在.box_NewsList>img
和這個小腳本循環遍歷圖像並為文本提供填充:
$('.box_NewsList').each(function() {
var imageWidth = $(this).find('img').width();
$(this).find('.box_NewsPreview').css('padding-left', imageWidth + 15);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.