代码之家  ›  专栏  ›  技术社区  ›  stojsins

CSS可扩展性图像映射

  •  0
  • stojsins  · 技术社区  · 10 年前

    我有个问题困扰了我几天: 当我调整浏览器窗口(PC视图、平板电脑视图、移动视图…)的大小时,如何使这个拼图图像的中心部分作为链接? 我需要链接Brede图像作为链接。

    <style type="text/css">
    .header-images {
    display: table;
    }
    
    .row {
        display: table-row;
    }
    
    .img-01 {
        display: table-cell;
        border: none;
    }
    
    .img-02 {
        display: table-cell;
        border: none;
    }
    
    .img-03 {
        display: table-cell;
        border: none;
    }
    
    .img-04 {
        display: table-cell;
        border: none;
    }
    
    .header-images img {
        width: 100%;
        height: auto;
    }
    </style>
    <div class="header-images">
     <div class="row">
      <div class="img-01">
       <a href="home/zuechter"><img src="http://s27.postimg.org/rloi8ejr7/01_en.png" alt=""></a>
      </div>
      <div class="img-02">
       <a href="/home/hundesport"><img src="http://s27.postimg.org/lm0r4qyyr/02_en.png" alt=""></a>
      </div>
     </div>
     <div class="row">
      <div class="img-03">
       <a href="/home/mitglied"><img src="http://s27.postimg.org/6fzarjybn/03_en.png" alt=""></a>
      </div>
      <div class="img-04">
       <a href="/home/jugend"><img src="http://s27.postimg.org/61xyrye83/04_en.png" alt=""></a>
      </div>
     </div>
    </div>
    1 回复  |  直到 10 年前
        1
  •  0
  •   stojsins    10 年前

    我设法用 Matt Stow plugin 。谢谢你,马特!