Question

我将垂直和水平图像都显示在我正在处理的新启动页面上的div中。图像是从我们的博客动态引入的。它们可以是垂直的也可以是水平的，它们总是比它们进入的div大。

我已经能够自动调整水平或垂直图像的大小，以适合但只有一个或另一个。我需要能够有图像进入，这样如果它们是水平的，它们适合div的整个宽度，如果它们是垂直的，它们适合div的整个高度。

您可以在http://americanart.si.edu/index_newsplash3h.cfm查看示例。这是中间的div，上面写着“我们博客的最新消息”。

我需要horiz和vert图像分别达到整个宽度或高度。因此，它接近于将图像置于div中但不完全。并且，所有图像都将大于容器div。

我一直在尝试一些解决方案，将图像集中在div中，这里已经讨论过，但似乎没有一个我正在处理的问题（所有图像都更大，水平图像需要达到全宽div和垂直图像需要达到div的全部高度。

感谢。

这是CSS：

middle {
    float: left;
    width: 30.5%;
    margin-right: 2.1%;
    margin-bottom: 2% ;
    background-color: #fff;
    min-height: 100%;
    background: url(/@res/img/americanart_blog_test.jpg) no-repeat #fff;
    padding-top: 31px;
    height: 212px;
    line-height: 212px;
    text-align: center;
    position: relative;
}

div#middlebackground {background-image: url(/@res/img/background_image.jpg); text-align: center;
}

div.middle img#middleimg { position:absolute;
    top:30px;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

（我不确定div＃middlebackground是否必要。这是早期版本的遗迹。）

HTML：

<div class="middle">
<div id="middlebackground">
<img id="middleimg" alt="Blog: Eye Level Image" src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg">
<br>
</div>
<p>
Eyes: they've been called windows to the soul and are often one of the first things we notice when meeting someone new. They can betray our emotions and give us away when we're not being truthful or when we want to hide the truth. In different cultures, an "evil eye" can be the cause of bad luck or injury while ...
<span class="red">
</p>
</div>

调整DIV中水平和垂直图像的大小

0 个答案: