0

別のウェブサイトからニュースを取得していて、例として表示したい

http://jsfiddle.net/r55Er/1/

問題は画像にあります。記事に関連付けられている画像のサイズが異なります。

80x80ピクセルの画像コンテナ「div」があり、画像を垂直方向と水平方向の両方の中央に表示したい

可能な限り最高の方法で画像を表示したい...

デザインを損なうことなく、可能な限り最良の方法で画像を表示する方法について、この点で助けていただければ幸いです。

<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://gulfnews.com/media/img/gulfnews_logo.png"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://i.cdn.turner.com/cnn/.e/img/3.0/global/header/intl/hdr-globe-central.gif"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://news.bbcimg.co.uk/media/images/65881000/jpg/_65881249_65881241.jpg"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://www.zawya.com/images/cia/large/130213070447ptjw.jpg"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
4

3 に答える 3

3

あなたはposition:absoluteあなたのイメージとあなたのイメージにposition:relativeそれからあなたのイメージnews-wrapperに与える必要がありtop:0;bottom:0;margin:autoます。私はあなたのフィドルを編集しました、そしてあなたはそれをここでチェックすることができますjsFiddle

于 2013-02-14T13:45:32.447 に答える
3

画像が比較的約80x80ピクセルの場合は、セルの背景を使用して画像を適用するだけです。このように、それは常に中央に配置されます..オーバーフローすることはありません..など。

<div class="news-wrapper">
    <div class="news-image" style="background-image:url('http://www.zawya.com/images/cia/large/130213070447ptjw.jpg';"></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>

.news-image {
    width:80px;
    height:80px;
    background-attachment:scroll;
    background-color:transparent;
    background-position:50% 50%;
    background-repeat:no-repeat
}
于 2013-02-14T13:32:33.953 に答える