3

デザイン/CSS に問題があります。私は Twitter Bootstrap を使用しており、.row-fluid を持っており、クラス サムネイルの順不同のリストがあります。その中に、クラス .thumbnail (以下のコード) のリンクである画像を表示する 3 つの .span3 クラスがあります。問題は、何らかの理由で画像が異なるサイズで表示されることです。ここで私が話していることを参照できます: http://douglascrescenzi.com/#portfolio

HTML コード:

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span3">
            <h2>Companies I've founded</h2>
            <a href="http://www.herodaysecurity.com" class="thumbnail" target="_blank">
            <img src="images/hero-day.jpg" alt="Hero Day Security"></a>
            <br>
            <br>
            <a href="http://www.crowdrouser.com" class="thumbnail" target="_blank">
            <img src="images/crowdrouser.jpg" alt="CrowdRouser"></a>
        </li>
        <li class="span3">
            <h2>Employers</h2>
            <a href="http://syracusestudentsandbox.com/" class="thumbnail" target="_blank">
            <img src="images/student-sandbox.jpg" alt="Syracuse Student Sandbox"></a>
            <br>
            <br>
            <a href="http://ischool.syr.edu/" class="thumbnail" target="_blank">
            <img src="images/su-informaiton-studies.jpg" alt="Syracuse University - School of Information Studies"></a>
            <br>
            <br>
            <a href="http://www.mitre.org" class="thumbnail" target="_blank">
            <img src="images/mitre.jpg" alt="The MITRE Corporation"></a>
        </li>
        <li class="span3">
            <h2>Freelance</h2>
            <a href="http://www.accsocialsecurityservices.com/" class="thumbnail" target="_blank">
            <img src="images/acc-sss2.png" alt="ACC Social Security Services"></a>
        </li>
    </ul>
</div> <!--row-fluid -->

ブートストラップ CSS:

.thumbnails {
  margin-left: -20px;
  list-style: none;
  *zoom: 1;
}

.thumbnails:before,
.thumbnails:after {
  display: table;
  content: "";
}

.thumbnails:after {
  clear: both;
}

.row-fluid .thumbnails {
  margin-left: 0;
}

.thumbnails > li {
  float: left;
  margin-bottom: 18px;
  margin-left: 20px;
}

.thumbnail {
  display: block;
  padding: 4px;
  line-height: 1;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}

a.thumbnail:hover {
  border-color: #0088cc;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
     -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
          box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}

.thumbnail > img {
  display: block;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.span3 {
  width: 220px;
}

.row-fluid .span3 {
  width: 23.404255317%;
  *width: 23.3510638276383%;
}

これは最善の方法ではないと確信していますが、ほとんど機能しています (表示されている画像のサイズがわずかに異なることを除けば.

ご意見、ご提案は大歓迎です。ありがとう！

4

1 に答える 1

4

高さと幅の比率が異なるため、画像が異なるサイズで表示されています。それらはすべて340px幅に縮小されていますが、一方が元の幅で680x680、もう一方が680x340縮小後の場合340x340、340x170それぞれ と になります。

これを修正するには、画像を自分でカットして適切なサイズにすることをお勧めします。また、そのページには幅が 2000 ピクセルを超える画像がありますが、必要なのは 340 ピクセルだけであるため、画像の最適化を行うことをお勧めします。これにより、帯域幅が大幅に節約され、ページの読み込みが大幅に高速化されます。

使用することはお勧めしませんが、それについて知っておく必要があります-画像の高さを同じに設定するだけです:

.thumbnail > img {
    display: block;
    height: 100px; /* add this */
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
于 2012-07-04T15:56:31.917 に答える