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

如果您的图像相对约为 80 x 80 像素，只需应用它们具有您的单元格的背景。这样，它将始终居中..永远不会溢出..等等。

<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 回答
3

你需要position:absolute你的图像和position:relative你的news-wrapper，然后给top:0;bottom:0;margin:auto你的图像。我编辑了你的小提琴，你可以在这里查看jsFiddle

于 2013-02-14T13:45:32.447 回答
2

要在中间垂直对齐图像，请尝试将 line-height 设置为等于容器的高度，并为图像设置 dispaly inline-block 与“vertical-align middle”。要水平对齐，只需为图像容器设置“文本对齐中心”。

.image-container {
     text-align: center;
     line-height: 80px; /* equals to container height */
}
img {
    display: inline-block;
    vertical-align: middle;
}

这是 jsfiddle 中的修改示例

于 2013-02-14T14:10:54.510 回答