javascript - 父div的CSS动态图像宽度

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是你提供的所有东西的 fiddle 。 This是提议的更改的 fiddle ，以及 .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" />