第一个 child 的图像的响应高度

Question

我制作了一个从我的网站获取最新消息的脚本，但现在我在设计上遇到了问题。我不知道为什么，但我的 height:auto 不起作用，我希望高度随宽度响应地工作，但那不会发生。

也许我的想法不适用于height:auto，因为有一个更大的图像。我试着用最大和最小高度来做这个，但这也不起作用。

我需要对所有屏幕做出响应，我知道媒体标签，但在媒体方面我想写一些小的更正 :)

这是我的代码，也许有人可以帮助我！？

HTML

<div id="news">

<div id="new_post" style="background-image:url(http://www.dailymobile.net/wp-content/uploads/2012/08/android-640x480-wallpaper-755.jpg)"><a href="" style="color:white">Lorem ipsum dolor sit amet</a></div>
<div id="new_post" style="background-image:url(http://www.dailymobile.net/wp-content/uploads/2012/08/android-640x480-wallpaper-690.jpg)"><a href="" style="color:white">Lorem ipsum dolor sit amet</a></div>
<div id="new_post" style="background-image:url(http://wfiles.brothersoft.com/bd/android_189070-640x480.jpg)"><a href="" style="color:white">Lorem ipsum dolor sit amet</a></div>

</div>

CSS

#new_post{
    display: inline-block;
    width: 50%;
    height: auto;
    margin:5px 5px 0 5px;
    background-size: cover;
background-position: center center;
}

#new_post:first-child{
    float: left;
    width: 45%;
    height: 205px;
    margin: 5px 0 5px 5px;
}

谢谢。

Answer 1

如果您想从这些网站获取图像并将其传送到您的网站，请使用此

 <img src="http://www.dailymobile.net/wp-content/uploads/2012/08/android-640x480-wallpaper-755.jpg" alt="Something about image" height="200" width="200">

Answer 2

看到这个：https://jsfiddle.net/psz7xw0n/18/

我没有首先定位 child，而是定位了 div 中的 a 标签并将其显示为 inline-block 以便给它一个高度。

您是否尝试让每个 div 也浮动？ div 50% 的宽度加上边距使其大于 50%，所以它们只是堆叠在一起。在示例中，我使用 calc 从百分比中删除边距宽度。

#new_post{
width: calc(50% - 10px);
float: left;
height: auto;
margin:5px 5px 0 5px;
background-size: cover;
background-position: center center;
}

#new_post a{
display: inline-block;
height: 300px;
margin: 5px 0 5px 5px;
}

Answer 3

很难在任何元素中保持纵横比，但使用图像很容易。

.new_post {
  display: inline-block;
  width: 45%;
  height: auto;
  margin: 5px 5px 0 5px;
  background-size: cover;
  background-position: center center;
}

.new_post:first-child {
  float: left;
  position: relative;
}

.new_post:first-child a {
  position: absolute;
  top: 0
}

.new_post img {
  width: 100%;
}

<div id="news">

  <div class="new_post"><a href="" style="color:white">Lorem ipsum dolor sit amet</a><img src="http://www.dailymobile.net/wp-content/uploads/2012/08/android-640x480-wallpaper-755.jpg"></div>
  <div class="new_post" style="background-image:url(http://www.dailymobile.net/wp-content/uploads/2012/08/android-640x480-wallpaper-690.jpg)"><a href="" style="color:white">Lorem ipsum dolor sit amet</a></div>
  <div class="new_post" style="background-image:url(http://wfiles.brothersoft.com/bd/android_189070-640x480.jpg)"><a href="" style="color:white">Lorem ipsum dolor sit amet</a></div>

</div>

第一个 child 的图像的响应高度

Responsive height for images with first child

html

css

responsive-design

responsive