Question

经过一番努力，我终于设法制作了一个复合CSS，就像这个小提琴一样：

https://jsfiddle.net/boywithk9/9L5o0rrf/14/

div.tile-square {
  position: relative;
  background-image: url("http://surfcityapps.com/img/bundle-tiles/background.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 300px;
  min-width: 300px;
  z-index: 1;
}
.tile-square-icon {
  position: absolute;
  z-index: 2;
  height: 160px;
  width: 160px;
  margin-left: 70px;
  margin-right: 70px;
  top: 17px;
  display: block !important;
}
div img.tile-square-name {
  position: absolute;
  z-index: 3;
  height: 40px;
  top: 215px;
  display: block !important;
}
.tile-square-bundle {
  position: absolute;
  z-index: 4;
  height: 15px;
  width: 130px;
  margin-left: 85px;
  margin-right: 85px;
  top: 265px;
  display: block !important;
}
.tile-square-shadow {
  -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .2));
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .2));
}

<div style="width: 209px">
  <p>
    <a href="http://surfcityapps.com/our-top-ten-apps-bundle/">
      <div class="tile-square">
        <img class="tile-square-icon tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/icon-top10.svg">
        <img class="tile-square-name tile-square-shadow" style="width: 220px; margin-left: 40px; margin-right: 40px;" src="http://surfcityapps.com/img/bundle-tiles/name-top10.svg">
        <img class="tile-square-bundle tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/bundle.svg">
        <img class="tile-square-OFFsale" src="http://surfcityapps.com/img/bundle-tiles/badge-onsale.png">
      </div>
    </a>
  </p>
</div>

但是，我还需要能够缩小尺寸（209px乘209px，300px乘300px）。

我能够使图像居中的唯一方法是指定容器和组件大小的方法。

现在我意识到这似乎无法将整个事情缩小。

有什么建议吗？

我是否必须根据另一个宽度创建第二组样式/ html？

Answer 1

不，永远不要为特定尺寸创建特定的CSS样式。

相反，请始终使用相对尺寸（百分比）。

例如：代替width: 150px，将其设为width: 39%。

通过这种方式，您可以得到宽度为容器宽度的39％，无论 （即使窗口调整大小） 。< / p>

我向您推荐的其他良好做法：

总是喜欢简单的解决方案，而不是复杂的解决方案。
始终将所有CSS样式放在CSS表格中，而不是放在style HTML属性中。这样，您将获得存储在一个地方的所有样式，而不是沿着CSS和HTML的一堆不整齐的声明。
明确区分 id选择器的类选择器：应使用类选择器来命名一组适用于页面中多个元素的规则。相反，一个id选择器将仅用于一个元素。
尽量不要在不同的选择器中重复相同的样式。相反，声明一个类并使它与必要的元素相同（我注意到你已经尊重这个规则了。祝贺你。）
尽量不要使用绝对定位， z-index 或 important! 限定符。一个好的设计不应该需要它们（当然，如果它本身并不复杂）。

基于这些建议，我向您提出了我的建议：

HTML：

我放弃了P元素，因为显然什么也没做，我添加了第二个<div>来证明相同的CSS规则适用于不同的元素，我给了一个不同的元素每个id都<div>。

<div id="x1">
        <a href="http://surfcityapps.com/our-top-ten-apps-bundle/">
            <div class="tile-square">
                <img class="tile-square-icon tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/icon-top10.svg">
                <img class="tile-square-name tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/name-top10.svg">
                <img class="tile-square-bundle tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/bundle.svg">
                <img class="tile-square-OFFsale" src="http://surfcityapps.com/img/bundle-tiles/badge-onsale.png">
            </div>
        </a>
</div>
<div id="x2">
        <a href="http://surfcityapps.com/our-top-ten-apps-bundle/">
            <div class="tile-square">
                <img class="tile-square-icon tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/icon-top10.svg">
                <img class="tile-square-name tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/name-top10.svg">
                <img class="tile-square-bundle tile-square-shadow" src="http://surfcityapps.com/img/bundle-tiles/bundle.svg">
                <img class="tile-square-OFFsale" src="http://surfcityapps.com/img/bundle-tiles/badge-onsale.png">
            </div>
        </a>
</div>

CSS：

div#x1 {
    width: 20%; 
    height: 20%;
    border: solid 1px;
}

div#x2 {
    width: 53%; 
    height: 53%;
    border: solid 1px;
}

div.tile-square {
    background-image: url("http://surfcityapps.com/img/bundle-tiles/background.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100%;
    width: 100%;
}

img.tile-square-shadow {
    -webkit-filter: drop-shadow( 1px 1px 1px rgba(0,0,0,.2) );
    filter: drop-shadow( 1px 1px 1px rgba(0,0,0,.2) );
}

img.tile-square-icon {
    margin-top: 7%;
    width: 50%;
    margin-left: 25%;
}

img.tile-square-name {
    margin-top: 10%;
    width: 80%;
    margin-left: 10%;
}

img.tile-square-bundle {
    margin-top: 2%;
    margin-bottom: 2%;
    width: 35%;
    margin-left: 32%;
}

img.tile-square-OFFsale {
    position: absolute;
    visibility: hidden;
    z-index: 5;
    width: 60%;
}

如您所见，我已将所有绝对尺寸转换为相对尺寸。

实际上，即使示例<div id="x1">和<div id="x2">的宽度也设置为百分比;您可以修改它们（甚至设置左边距）以查看相对方面保持相同。

类选择器将由图像元素共享，而id选择器仅用于容器<div>元素。

如何使CSS组合可伸缩

1 个答案: