当我第一次使用哪种浏览器加载网站时，除非调整浏览器的大小，否则图像似乎无法正确对齐。
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>
答案 0 :(得分：0)
您可能想为图像设置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>