Question

我正在开展一个有趣的辅助项目并偶然发现问题。我正在开发一个动态宽度的网站，其中的内容根据浏览器的宽度调整大小。我在页面上有一些图像，我想根据浏览器的大小调整大小，而不是根据图像的大小。这是一些代码：

<div class="songblock">
 <div class="play" data-artist="Lorde" data-song="Royals" data-img="93158109.png">
  <div class="parrow"></div>
 </div>
 <img class="img lazyloadme" src="/img/pixel.png" data-original="http://userserve-ak.last.fm/serve/252/93158109.png" alt="PearlSquirrel"/>
 <div class="song">Royals</div>
 <div class="artist">
  <a href="/artist/Lorde">
   Lorde
  </a>
 </div>
</div>

CSS：

@media only screen and (min-width:1px) and (max-width:1300px) {
.songblock{
    width:22%;
    margin-right:4%;
}
.songblock:nth-child(4n){
    margin-right:0px;
}
}
@media only screen and (min-width:1301px){
.songblock{
    width:17%;
    margin-right:3.75%;
}
.songblock:nth-child(5n){
    margin-right:0px;
}
}
.songblock{
height:auto;
float:left;
position:relative;
margin-bottom:30px;
}
.songblock:hover .play{
display:block;
}
.img{
height:auto;
width:100%;
min-height:125px;
min-width:125px;
float:left;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
box-shadow: 0 4px 3px -3px #ABABAB;
-webkit-box-shadow: 0 4px 3px -3px #ABABAB;
-moz-box-shadow: 0 4px 3px -3px #ABABAB;
}

目前，正在使用的图像都是252x252px，而我分配给.img的宽度是一个百分比。我想要发生的是图像是父div宽度的百分比而不是图像本身大小的百分比。我知道这可以很容易地使用javascript完成，但我试图使这个应用程序尽可能轻量级，并希望坚持使用CSS，如果可以做到的话。谢谢您的帮助。如果有其他信息有用，请告诉我。

编辑：我解决了这个问题，感谢所有的帮助！

Answer 1

删除图片代码中的data-original，并将该内容放入src属性中。

更改.img的百分比时， 取父级的宽度，但示例中的父级宽度仅为窗口的22％。

This是你提供的所有东西的小提琴。 This是提议的更改的缩写，以及.songblock宽度更改为width: 55%;以显示图像正确缩放。

由此：

<img class="img lazyloadme" src="/img/pixel.png" data-original="http://userserve-ak.last.fm/serve/252/93158109.png" alt="PearlSquirrel" />

对此：

<img class="img lazyloadme" src="http://userserve-ak.last.fm/serve/252/93158109.png" alt="PearlSquirrel" />

Answer 2

在添加css之前，我在图像中添加了height和width属性。这似乎暂时缓解了我的问题。再次感谢您的帮助！

父div的CSS动态图像宽度

2 个答案: