Question

我制作了一个脚本，从我的网站获得最新消息，但现在我的设计有问题。我不知道为什么，但我的height:auto不起作用，我希望高度响应宽度，但这并不会发生。

也许我的想法不能与height:auto一起使用，因为有一个更大的形象。我试图用max-＆amp; amp;最小高度，但这也不起作用。

我需要对所有屏幕做出响应，我知道媒体标签，但在媒体中我想写一些小的修正：）

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

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

很难实现在任何元素中保持宽高比但是图像非常容易。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您想获取图片并从这些网站访问您的网站，请使用此

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

请参阅：https://jsfiddle.net/psz7xw0n/18/

我没有定位第一个孩子，而是将div中的一个标记作为目标，并将其显示为内嵌块，以便为它提供一个高度。

你是否试图让每个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;
}

第一个孩子的图像的响应高度

3 个答案: