How to make images change in size without losing quality?

Navigation
0

I'm working on this site on bootstrap link

All I wanted was that depending on the format of the screen the images did not lose quality

I tested the following 

<style>
	 
	.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  width: 100%;
  height: 200px;
 
}
</style>
<link href="http://turismo.adota-me.tk/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><divid="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div  class="carousel-inner" role="listbox">
   <div class="item active">
	     <img src="http://turismo.adota-me.tk//img/carousel/lisbon.jpg"width="2050" height="673" alt="lisbon">
    </div>
   <div class="item">
       <img src="http://turismo.adota-me.tk//img/carousel/lisbon.jpg"width="2050" height="673" alt="lisbon">
    </div>
    <div class="item">
        <img src="http://turismo.adota-me.tk//img/carousel/lisbon.jpg"width="2050" height="673" alt="lisbon">
    </div>
  </div>

</div>
  
 </body>

The problem is that when the screen is no longer horizontal the images begin to leave the finer elements.

I think I'll have to have 2 or 3 images saved on the server and display them depending on the screen.

    
asked by anonymous 31.08.2016 / 17:01

1 answer

2

What's happening in reality is that on a smaller screen, say 600px you're explicitly saying you want it to be 2050px, almost 4 times larger than the screen.

An output, but perhaps not the best one, is to set the width of the image to 100% and remove the height , which is distorting, this will make the image fill the entire screen size and maintain the aspect ratio.

Another thing I also noticed is that the images are in a "thin" proportion this for example has 2045x300 

<style> .img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
}
</style>
<link href="http://turismo.adota-me.tk/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><divid="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://turismo.adota-me.tk//img/carousel/lisbon.jpg"width="100%" alt="lisbon">
    </div>
    <div class="item">
      <img src="http://turismo.adota-me.tk//img/carousel/lisbon.jpg"width="100%" alt="lisbon">
    </div>
    <div class="item">
      <img src="http://turismo.adota-me.tk//img/carousel/lisbon.jpg"width="100%" alt="lisbon">
    </div>
  </div>

</div>

</body>
    
31.08.2016 / 17:43
Make a mark on your Google Maps map Maintenance page ASP.NET MVC