在頁面調整大小的CSS中拉伸圖像

Question

我正在學習如何做CSS，並且我正在從可以在窗口大小調整時縮放圖像的模板向後工作。我認爲在模板此效果的類是這個：

.project-link { 
     background-size: cover; 
     background-repeat: no-repeat; 
     background-position: center; 
     background-color: #adadad; 
     position: relative; 
     overflow: hidden; 
     display: inline-block; 
     width: 80%; 
    } 
    .circle .project-link, .circle .project-link .hover { 
     border-radius: 100%; 
     -moz-border-radius: 100%; 
     -webkit-border-radius: 100%; 
    } 
    .project-link .hexagon-top { 
     content: ''; 
     display: block; 
     position: absolute; 
     left: 0; 
     border-style: solid; 
     border-bottom-color: transparent; 
     border-left-color: #dfdfdf; 
     border-right-color: #dfdfdf; 
     width: 0; 
     height: 0; 
     z-index: 2; 
    } 
    .project-link .hexagon-bottom { 
     content: ''; 
     display: block; 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     border-style: solid; 
     border-top-color: transparent; 
     border-left-color: #dfdfdf; 
     border-right-color: #dfdfdf; 
     width: 0; 
     height: 0; 
     z-index: 2; 
    } 
     .project-link .hover { 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      font-size: 14px; 
      text-align: center; 
      color: #fff; 
      background: #ec6136; 
      text-decoration: none; 
      text-transform: uppercase; 
      display: block; 
      opacity: 0; 
      transition: all .3s; 
      -moz-transition: all .3s; 
      -webkit-transitin: all .3s; 
     } 
      .project-link .hover-text { 
       display: block; 
       margin-top: 45%; 
      } 
      .project-link .hover-text:after { 
       content: '>'; 
       font-family: 'icon'; 
       font-size: 12px; 
       margin-left: 15px; 
      } 
     .project-link:hover > .hover { 
      opacity: .9; 
     } 

我的一個類似的類代碼如下：

.HS { 
display: inline-block; 
position: relative; 
text-indent: -9999px; 
width: 283px; 
height: 213px; 
background: url(http://www.hugoproject.com/ftp1/images/icons.png) no-repeat; 

}

.HS span { 
position: absolute; 
top: 0; left: 0; bottom: 0; right: 0; 
background: url(http://www.hugoproject.com/ftp1/images/icons.png) no-repeat; 
background-position: 0 -214px; 
opacity: 0; 
-webkit-transition: opacity 0.5s; 
-moz-transition: opacity 0.5s; 
-o-transition:  opacity 0.5s; 

}

.HS:hover span { 
opacity: 1; 

}

能否請您指出我要出錯的方向？謝謝

Answer 1

基本上你的問題不是很清楚。但基於我的理解，這是事情。

如果您查看您從模板中提供的示例代碼，它將使用百分比值來表示寬度。所以這些元素的寬度總是與瀏覽器大小成比例。

E.g.檢查寬度：80％;在以下課程

.project-link { 
     background-size: cover; 
     background-repeat: no-repeat; 
     background-position: center; 
     background-color: #adadad; 
     position: relative; 
     overflow: hidden; 
     display: inline-block; 
     width: 80%; 
    } 

使用百分比值是創建響應式設計的方法之一。