html - 加载时我的网站上的图片格式不正确

Question

当我在第一次尝试在任何浏览器中加载我的网站时，我的图像似乎没有正确对齐，除非我调整浏览器的大小。

http://sahyogseniorclubmontreal.com/index.html这里是我网页的链接。

我似乎只在我第一次打开网页时才会发生，并且只是在我将网站上传到 Godaddy 后才发生。当我在本地运行它时，它不会发生。

<div class="portfolio-list">

  <ul class="nav list-unstyled" id="portfolio-flters">
    <li class="filter filter-active" data-filter=".all">all</li>
    <li class="filter" data-filter=".branding">Parliament Trip</li>
    <li class="filter" data-filter=".mockups">Christmas Supper At Kwality Restaurant</li>
    <!--  <li class="filter" data-filter=".uikits">ui kits</li>
      <li class="filter" data-filter=".webdesign">web design</li>
      <li class="filter" data-filter=".photography">photography</li> -->
  </ul>

</div>

<div class="portfolio-container">

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181121-WA0011.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181121-WA0012.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181122-WA0013.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181122-WA0021.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181122-WA0012.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181123-WA0004.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181122-WA0005.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181121-WA0001.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181121-WA0002.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
    <a class="popup-img" href="images/portfolio/IMG-20181217-WA0001.jpg">
      <img src="https://via.placeholder.com/350x150"  alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
    <a class="popup-img" href="images/portfolio/IMG-20181217-WA0003.jpg">
      <img src="https://via.placeholder.com/350x150"  alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
    <a class="popup-img" href="images/portfolio/IMG-20181217-WA0004.jpg">
      <img src="https://via.placeholder.com/350x150"  alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
    <a class="popup-img" href="images/portfolio/IMG-20181217-WA0005.jpg">
      <img src="https://via.placeholder.com/350x150"  alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
    <a class="popup-img" href="images/portfolio/IMG-20181217-WA0006.jpg">
      <img src="https://via.placeholder.com/350x150"  alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups uikits photography">
    <a class="popup-img" href="images/portfolio/IMG-20181217-WA0007.jpg">
      <img src="https://via.placeholder.com/350x150"  alt="img">
    </a>
  </div>

</div>

标签： htmlcsstwitter-bootstrap

Answer 1

您可能希望为图像设置width和height属性。或者用 CSS 设置它们：

.portfolio-thumbnail img {
  max-width: 200px; /* This is just an example value */
  max-height: 200px; /* Idem */
}

<div class="portfolio-list">

  <ul class="nav list-unstyled" id="portfolio-flters">
    <li class="filter filter-active" data-filter=".all">all</li>
    <li class="filter" data-filter=".branding">Parliament Trip</li>
    <li class="filter" data-filter=".mockups">Christmas Supper At Kwality Restaurant</li>
    <!--  <li class="filter" data-filter=".uikits">ui kits</li>
      <li class="filter" data-filter=".webdesign">web design</li>
      <li class="filter" data-filter=".photography">photography</li> -->
  </ul>

</div>

<div class="portfolio-container">

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181121-WA0011.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181121-WA0012.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181122-WA0013.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181122-WA0021.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181122-WA0012.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181123-WA0004.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181122-WA0005.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181121-WA0001.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all branding">
    <a class="popup-img" href="images/portfolio/IMG-20181121-WA0002.jpg">
      <img src="https://via.placeholder.com/350x150" alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
    <a class="popup-img" href="images/portfolio/IMG-20181217-WA0001.jpg">
      <img src="https://via.placeholder.com/350x150"  alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
    <a class="popup-img" href="images/portfolio/IMG-20181217-WA0003.jpg">
      <img src="https://via.placeholder.com/350x150"  alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
    <a class="popup-img" href="images/portfolio/IMG-20181217-WA0004.jpg">
      <img src="https://via.placeholder.com/350x150"  alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
    <a class="popup-img" href="images/portfolio/IMG-20181217-WA0005.jpg">
      <img src="https://via.placeholder.com/350x150"  alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups">
    <a class="popup-img" href="images/portfolio/IMG-20181217-WA0006.jpg">
      <img src="https://via.placeholder.com/350x150"  alt="img">
    </a>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-thumbnail all mockups uikits photography">
    <a class="popup-img" href="images/portfolio/IMG-20181217-WA0007.jpg">
      <img src="https://via.placeholder.com/350x150"  alt="img">
    </a>
  </div>

</div>