How to make pictures change size without losing quality?

Asked

Viewed 241 times

0

I am working on this site in bootstrap http://turismo.adopte-me.tk/

All I wanted was that depending on the format of screens 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>

<div id="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 ceases to be horizontal the images start to make the elements thinner.

I guess I’ll have to have 2 or 3 images saved on the server and display them depending on the screen

bootstrap

1 answer

2


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

A way out, but maybe not the best way, is to define the widthimage to 100% and remove the height, which is distorting, this will make the image occupy the entire screen size and maintain the ratio.

Another thing I also noticed is that the images are with a "thinner ratio" this one 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>

<div id="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>

Browser other questions tagged bootstrap

You are not signed in. Login or sign up in order to post.