Question

我正在抓住来自不同网站的消息。想要将它们显示为显示为example

问题在于图像，与文章相关联的图像具有不同的维度。

我有一个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>

Answer 1

如果您的图像相对大约为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
}

Answer 2

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

Answer 3

要在中间垂直对齐图像，请尝试将行高设置为容器的高度，并使用＆＃34; vertical-align middle＆＃34;设置显示的内联块。对于图像。要水平对齐，只需设置＆＃34;文本对齐中心＆＃34;对于图像容器。

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

Here's modified sample in jsfiddle

在固定大小的div的中心显示不同尺寸的图像

3 个答案: