在CSS中调整图片的尺寸

请原谅我，如果之前有人问过这个问题，但我总是将图片的随机黑客拉到一起，并希望知道一种确切的方式来做我正在寻找的东西。这里的HTML：在CSS中调整图片的尺寸

<div class="track-artwork"> 
     <img src="<?php echo $chart_track->image; ?>" class="background-image"> 
     <audio> 
      <source src="" type="audio/mp4" /> 
      <source src="" type="audio/aac" /> 
     </audio> 
    </div> 
</div>

我链接就是111px X 111px的图像。它需要更小，以适应轨道图稿div并完全显示。我没有能力使用诸如photoshop之类的东西来编辑资产的大小。我想这样做，因此图像充当各种“背景”，其大小适合具有任意大小的5px页边距的“track-artwork”div。以下是我玩过的CSS来达到这个目的：

.track-artwork { 
    cursor: pointer; 
    display: inline-block; 
    height: 100%; 
    margin: 0; 
    position: relative; 
    vertical-align: top; 
    width: 20%; 
} 

.background-image { 
    position: absolute; 
    z-index: 0; 
    width: 100%; 
    top: 0; 
    left: 0; 
}

不幸的是，这是不行的。宽度似乎正确，但高度不起作用 - 无论我输入什么，它似乎都保持111px。我用硬像素值尝试过，但它不会改变。思考？

来源

2013-10-28 user1427661

你能提供一个jsfiddle吗？ – kelunik

我会将图像设置为div背景，并使用包含或覆盖作为背景大小。

.track-artwork { 
    cursor: pointer; 
    display: inline-block; 
    height: 100%; 
    margin: 0; 
    position: relative; 
    vertical-align: top; 
    width: 20%; 
    background-size: cover; // or background-size: contain; 
}

封面将填充背景图片的整个div，如果比例不相同，会切断部分图片。

包含将调整图像的大小，以便在div内完全可见。您必须使用php将背景图像url设置为正确的图像位置。

来源

2013-10-28 18:51:33 Smeegs

这个工程很好，除非我扩展div的高度很多......图像不能适应其容器的高度，而是垂直居中... – user1427661

我认为这可能会更好。如果图像过大，那么它会变得非常像素化。当div扩展如此之多时，可能使用'background-color'作为图像周围的缓冲区？ –

您可以使用CSS3 background-size属性来执行此操作。

PHP

<div class="track-artwork" style="background-image:url(<?php echo $chart_track->image; ?>);"> 
    <audio> 
     <source src="" type="audio/mp4" /> 
     <source src="" type="audio/aac" /> 
    </audio> 
</div>

CSS

.track-artwork { 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
}

IE8填充工具

如果您需要支持IE8，还有填充工具。你可以得到它，并在如何使用它的信息：https://github.com/louisremi/background-size-polyfill

来源

2013-10-28 18:51:31

在CSS中调整图片的尺寸

回答

相关问题