我之前从未遇到过这个问题。图像在大于768像素的断点处清晰但在移动断点处变得模糊，任何人都知道可能会发生什么？
网站位于：http://staging.asla.org/newsustainablelandscapes/index.html
<div id="home-container">
<header class="clearfix">
<button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float: left;">
<span class="sr-only">Toggle Button</span>
MENU
</button>
<nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch navbar-offcanvas-fade" role="navigation" id="js-bootstrap-offcanvas">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float: left;">
<span class="sr-only">Toggle Navigation</span>
<i class="glyphicon glyphicon-remove"></i>
</button>
<a class="navbar-brand" id="logo" href="http://www.asla.org"><img src="images/Logo.png"></a>
</div>
<div id="nav-container">
<ul class="nav navbar-nav" id="dropdown">
<li class="dropdown cases studies">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" id="main-nav">Case Studies</a>
<ul class="dropdown-menu multi-column cases-body studies-drop cols" role="menu">
<li class="dropdown-submenu">
<a href="#">U.S. Mid-Atlantic</a>
<ul class="dropdown-menu" role="menu">
<p class="category-cases"><a href="sidwell.html">Sidwell Friends School</a></p>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">U.S. Northeast</a>
<ul class="dropdown-menu" role="menu">
<p class="category-cases"><a href="bryantpark.html">Bryant Park</a></p>
<p class="category-cases"><a href="brownfield.html">From Brownfield to Greenfield</a></p>
<p class="category-cases"><a href="gowanus.html">Gowanus Canal Sponge Park™</a></p>
<p class="category-cases"><a href="highline.html">High Line Park</a></p>
<p class="category-cases"><a href="lilylake.html">Lily Lake Residence</a></p>
<p class="category-cases"><a href="trid.html">Transit Revitalization Investment District (TRID) Master Plan</a></p>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">U.S. Northwest</a>
<ul class="dropdown-menu" role="menu">
<p class="category-cases"><a href="highpoint.html">High Point</a></p>
<p class="category-cases"><a href="raingarden.html">Mount Tabor Middle School Rain Garden</a></p>
<p class="category-cases"><a href="greenstreet.html">NE Siskiyou Green Street </a></p>
<p class="category-cases"><a href="greenroof.html">Washington Mutual Center Green Roof</a></p>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">U.S. Midwest</a>
<ul class="dropdown-menu" role="menu">
<p class="category-cases"><a href="greensburg.html">Greensburg Sustainable Comprehensive Plan</a></p>
<p class="category-cases"><a href="discovery.html">James Clarkson Environmental Discovery Center</a></p>
<p class="category-cases"><a href="kresge.html">Kresge Foundation Headquarters</a></p>
<p class="category-cases"><a href="rooftophaven.html">Rooftop Haven for Urban Agriculture</a></p>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">U.S. West</a>
<ul class="dropdown-menu" role="menu">
<p class="category-cases"><a href="cas.html">California Academy of Sciences</a></p>
<p class="category-cases"><a href="caltech.html">California Institute of Technology Master Plan</a></p>
<p class="category-cases"><a href="crackgarden.html">The Crack Garden</a></p>
<p class="category-cases"><a href="gardengarden.html">Garden/Garden — A Comparison in Santa Monica</a></p>
<p class="category-cases"><a href="geos.html">Geos Net Zero Energy Neighborhood</a></p>
<p class="category-cases"><a href="nuevaschool.html">Nueva School </a></p>
<p class="category-cases"><a href="cannerylofts.html">Pacific Cannery Lofts</a></p>
<p class="category-cases"><a href="transwater.html">Transformative Water</a></p>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">U.S. Southeast</a>
<ul class="dropdown-menu" role="menu">
<p class="category-cases"><a href="vietvillage.html">Viet Village Urban Farm</a></p>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">U.S. Southwest</a>
<ul class="dropdown-menu" role="menu">
<p class="category-cases"><a href="sonoran.html">Underwood Family Sonoran Landscape Laboratory</a></p>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">Canada</a>
<ul class="dropdown-menu" role="menu">
<p class="category-cases"><a href="hto.html">HtO Park</a></p>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">Europe</a>
<ul class="dropdown-menu" role="menu">
<p class="category-cases"><a href="cradletocradle.html">Park 20/20: A Cradle to Cradle Inspired Master Plan</a></p>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">Asia</a>
<ul class="dropdown-menu" role="menu">
<p class="category-cases"><a href="chongae.html">ChonGae Canal Point Source Park</a></p>
<p class="category-cases"><a href="ecolodge.html">Crosswaters Ecolodge</a></p>
<p class="category-cases"><a href="redribbon.html">The Red Ribbon, Tanghe River Park</a></p>
</ul>
</li>
</ul>
</li>
<li class="dropdown cases videos">
<a class="dropdown-toggle" href="videos.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Animations</a>
<ul class="dropdown-menu cases-body videos-drop">
<p style="padding-top:15px;" class="category-cases"><a href="Vid_Waste.html">Building a Park Out of Waste</a></p>
<p class="category-cases"><a href="Vid_ActiveLiving.html">Designing for Active Living</a></li>
<p class="category-cases"><a href="Vid_Wildlife.html">Designing Neighborhoods for People and Wildlife</a></p>
<p class="category-cases"><a href="Vid_UrbanAg.html">The Edible City</a></li>
<p class="category-cases"><a href="Vid_Energy.html">Energy Efficient Home Landscapes</a></p>
<p class="category-cases"><a href="Vid_Brownfields.html">From Industrial Wasteland to Community Park</a></p>
<p class="category-cases"><a href="Vid_Infrastructure.html">Infrastructure for All</a></p>
<p class="category-cases"><a href="Vid_WaterManagement.html">Leveraging the Landscape to Manage Water</a></p>
<p class="category-cases"><a href="Vid_Parks.html">Revitalizing Communities with Parks</a></p>
<p class="category-cases"><a href="Vid_UrbanForests.html">Urban Forests = Cleaner, Cooler Air</a></p>
</ul>
</li>
<li class="dropdown cases educations">
<a class="dropdown-toggle" href="education.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Education</a>
<ul style="padding-right:0;" class="dropdown-menu cases-body educations-drop">
<p style="padding-top:15px; " class="category-cases"><a href="Ed_Brownfields.html">Brownfield Restoration / Ecosystem Rehabilitation</a></p>
<p class="category-cases"><a href="Ed_ActiveLiving.html">Design for Active Living</a></p>
<p class="category-cases"><a href="Ed_Wildlife.html">Designing for Biodiversity</a></p>
<p class="category-cases"><a href="Ed_Energy.html">Energy Efficiency</a></p>
<p class="category-cases"><a href="Ed_WaterManagement.html">Green Infrastructure</a></p>
<p class="category-cases"><a href="Ed_Waste.html">Incorporating Sustainable Materials</a></p>
<p class="category-cases"><a href="Ed_Infrastructure.html">Transforming Transportation Infrastructure</a></p>
<p class="category-cases"><a href="Ed_UrbanAg.html">Urban Agriculture</a></p>
<p class="category-cases"><a href="Ed_UrbanForests.html">Urban Forestry</a></p>
<p class="category-cases"><a href="Ed_Parks.html">Urban Parks</a></p>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="clear"></div>
<div id="header">
<div class="title"><a href="index.html">
<span class="design">DESIGNING OUR FUTURE:</span>
<span class="sustainable">SUSTAINABLE LANDSCAPES</span></a></div>
</div>
<div class="thumbnail-bar">
<a class="textleft prev disabled">View Previous</a>
<a class="textright next">View More</a>
</div>
<!-- THUMBNAILS -->
<div class="scrollable">
<div class="thumbnails">
<!--row 1 1st slide-->
<div class="thumb"><span>30 case studies illustrate the transformative effects of sustainable landscape design.</span></div>
<div class="thumb"><a href="cas.html"><span><p class="title">California Academy of Sciences</p><p class="index-title-city">San Francisco, California, U.S.A.</p></span><img src="images/home/CAS.jpg"></a></div>
<div class="thumb"><a href="chongae.html"><span><p class="title">ChonGae Canal Point Source Park</p><p class="index-title-city">Seoul, South Korea</p></span><img src="images/home/ChonGae.jpg"></a></div>
<div class="thumb"><a href="sidwell.html"><span><p class="title">Sidwell Friends School</p><p class="index-title-city">Washington, D.C., U.S.A</p></span><img src="images/home/Sidwell.jpg"></a></div>
<div class="thumb"><a href="gowanus.html"><span><p class="title">Gowanus Canal Sponge Park™</p><p class="index-title-city">Brooklyn, New York, U.S.A.</p></span><img src="images/home/Gowanus.jpg"></a></div>
<div class="clear"></div>
<!--row 2 1st slide-->
<div class="thumb"><a href="geos.html"><span><p class="title">Geos Net Zero Energy Neighborhood</p><p class="index-title-city">Arvada, Colorado, U.S.A.</p></span><img src="images/home/Geos.jpg"></a></div>
<div class="thumb"><a href="ecolodge.html"><span><p class="title">Crosswaters Ecolodge</p><p class="index-title-city">Nankun Mountain Reserve, Guangdong Province, China</p></span><img src="images/home/Ecolodge.jpg"></a></div>
<!--double wide-->
<div class="movie"><img src="images/home/VideosHeader_Orange.png"><p style="padding:10px 25px 0px 25px;">Watch animations created with Google Sketchup to learn how sustainable design works.
<a class="non" href="videos.html"></a></p></div>
<div class="thumb"><a href="discovery.html"><span><p class="title">James Clarkson Environmental Discovery Center</p><p class="index-title-city">White Lake Township, Michigan, U.S.A.</p></span><img src="images/home/Discovery.jpg"></a></div>
<div class="clear"></div>
<!--row 3 1st slide-->
<div class="thumb"><a href="about.html"><span><img src="images/home/about.jpg"></span><img src="images/home/about.jpg"></a></div>
<div class="thumb"><a href="gardengarden.html"><span><p class="title">Garden/Garden — A Comparison in Santa Monica</p><p class="index-title-city">Santa Monica, California, U.S.A.</p></span><img src="images/home/GardenGarden.jpg"></a></div>
<div class="thumb"><a href="education.html"><span><img src="images/home/Education.jpg"></span><img src="images/home/Education.jpg"></a></div>
<div class="thumb"><a href="lilylake.html"><span><p class="title">Lily Lake Residence</p><p class="index-title-city">Dalton, Pennsylvania, U.S.A.</p></span><img src="images/home/LilyLake.jpg"></a></div>
<div class="thumb"><a href="caltech.html"><span><p class="title">California Institute of Technology Master Plan</p><p class="index-title-city">Pasadena, California, U.S.A.</p></span><img src="images/home/CalTech.jpg"></a></div>
</div>
<div class="thumbnails">
<!--row 1 2nd slide-->
<div class="thumb"><a href="cradletocradle.html"><span><p class="title">Park 20/20: <br>A Cradle to Cradle Inspired Master Plan</p><p class="index-title-city">Haarlemmermeer, Netherlands</p></span><img src="images/home/2020Cradle.jpg"></a></div>
<div class="thumb"><a href="highpoint.html"><span><p class="title">High Point</p><p class="index-title-city">Seattle, Washington, U.S.A.</p></span><img src="images/home/Highpoint_Index.jpg"></a></div>
<div class="thumb"><a href="bryantpark.html"><span><p class="title">Bryant Park</p><p class="index-title-city">New York City, <br>New York, U.S.A.</p></span><img src="images/home/BryantPark.jpg"></a></div>
<div class="thumb"><a href="rooftophaven.html"><span><p class="title">Rooftop Haven for Urban Agriculture</p><p class="index-title-city">Chicago, Illinois, U.S.A.</p></span><img src="images/home/RooftopHaven.jpg"></a></div>
<div class="thumb"><a href="greenstreet.html"><span><p class="title">NE Siskiyou Green Street</p><p class="index-title-city">Portland, Oregon, U.S.A.</p></span><img src="images/home/SiskiyouSt_Index.jpg"></a></div>
<div class="clear"></div>
<!--row 2 2nd slide-->
<div class="thumb"><a href="cannerylofts.html"><span><p class="title">Pacific Cannery Lofts</p><p class="index-title-city">Oakland, California, U.S.A.</p></span><img src="images/home/CanneryLofts.jpg"></a></div>
<div class="thumb"><a href="brownfield.html"><span><p class="title">From Brownfield to Greenfield</p><p class="index-title-city">Wellesley, Massachusetts, U.S.A.</p></span><img src="images/home/WellesleyCollege_Index.jpg"></a></div>
<div class="thumb"><a href="greensburg.html"><span><p class="title">Greensburg Sustainable Comprehensive Plan</p><p class="index-title-city">Greensburg, Kansas, U.S.A.</p></span><img src="images/home/Greensburg_Index.jpg"></a></div>
<div class="thumb"><a href="trid.html"><span><p class="title">Transit Revitalization Investment District (TRID) Master Plan</p><p class="index-title-city">Philadelphia, Pennsylvania, U.S.A.</p></span><img src="images/home/TRID.jpg"></a></div>
<div class="thumb"><a href="raingarden.html"><span><p class="title">Mount Tabor Middle School Rain Garden</p><p class="index-title-city">Portland, Oregon, U.S.A.</p></span><img src="images/home/RainGarden_Index.jpg"></a></div>
<div class="clear"></div>
<!--row 3 2nd slide-->
<div class="thumb"><a href="transwater.html"><span><p class="title">Transformative Water</p><p class="index-title-city">Pitkin County, Colorado, U.S.A.</p></span><img src="images/home/TransWater.jpg"></a></div>
<div class="thumb"><a href="vietvillage.html"><span><p class="title">Viet Village Urban Farm</p><p class="index-title-city">New Orleans, Louisiana, U.S.A.</p></span><img src="images/home/VietVillage_Index.jpg"></a></div>
<div class="thumb"><a href="hto.html"><span><p class="title">HtO Park</p><p class="index-title-city">Toronto, Canada</p></span><img src="images/home/HtO.jpg"></a></div>
<div class="thumb"><a href="crackgarden.html"><span><p class="title">The Crack Garden</p><p class="index-title-city">San Francisco,<br>California, U.S.A.</p></span><img src="images/home/CrackGarden_Index.jpg"></a></div>
<div class="thumb"><a href="kresge.html"><span><p class="title">Kresge Foundation Headquarters</p><p class="index-title-city">Troy, Michigan, U.S.A.</p></span><img src="images/home/Kresge.jpg"></a></div>
</div>
<div class="thumbnails">
<!--row 1 3rd slide-->
<div class="thumb"><a href="greenroof.html"><span><p class="title">Washington Mutual Center Green Roof</p><p class="index-title-city">Seattle, Washington, U.S.A.</p></span><img src="images/home/WaMuRoof_Index.jpg"></a></div>
<div class="thumb"><a href="highline.html"><span><p class="title">High Line Park</p><p class="index-title-city">New York City, <br>New York, U.S.A.</p></span><img src="images/home/Highline_Index.jpg"></a></div>
<div class="thumb"><a href="redribbon.html"><span><p class="title">The Red Ribbon, Tanghe River Park</p><p class="index-title-city">Qinhuangdao City, <br>Hebei Province, China</p></span><img src="images/home/RedRibbon_Index.jpg"></a></div>
<div class="thumb"><a href="nuevaschool.html"><span><p class="title">Nueva School</p><p class="index-title-city">Hillsborough, California, U.S.A</p></span><img src="images/home/NuevaSchool.jpg"></a></div>
<div class="thumb"><a href="sonoran.html"><span><p class="title">Underwood Family Sonoran Landscape Laboratory</p><p class="index-title-city">University of Arizona, Tucson, Arizona, U.S.A.</p></span><img src="images/home/Sonoran.jpg"></a></div>
</div>
</div>
<!--THUMBNAILS END-->
<!--FOOTER-->
<div class="clear"></div>
<div id="loadMore"><p>Load more</p></div>
<div id="showLess"><p>Show less</p></div>
<div id="footer">
<div class="copy">©2014 American Society of Landscape Architects<br>
<a href="mailto:info@asla.org">Contact Us</a>
</div>
<div class="nea"><img style="float:left; margin-right:10px;" src="images/NEALogo.png">This Web site has been made possible through a grant by: <a target="_blank" href="http://www.nea.gov/">National Endowment for the Arts</a> </div>
<div class="clear"></div>
</div>
</div>
答案 0 :(得分：1)
问题与图像在常规尺寸下为162x162有关，但对于移动设备缩小为105x105。这通常会导致模糊效果，因为浏览器不是图像处理器。
解决方案是根据自己的喜好创建较小的图片，然后使用媒体查询来提供相应的图像。