Images are cut off using bootstrap class img-responsive and jcarousel
Question
I'm trying to get jcarousel.js and bootstrap to display images. I'm using the connected carousel example, but slightly modified to use bootstrap css.
Here is the following code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Connected Carousels - jCarousel Examples</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Example assets -->
<link rel="stylesheet" type="text/css" href="jcarousel.connected-carousels.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://sorgalla.com/jcarousel/dist/jquery.jcarousel.min.js?raw=1"></script>
<script type="text/javascript" src="jcarousel.connected-carousels.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7">
<div class="connected-carousels">
<div class="stage">
<div class="carousel carousel-stage">
<ul>
<li><img class="img-responsive" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/01/digital-wallpaper-3.jpg" width="600" height="400" alt=""></li>
<li><img class="img-responsive" src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png" width="600" height="400" alt=""></li>
<li><img class="img-responsive" src="http://graphics8.nytimes.com/images/2014/03/13/learning/VTS03-17-14LN/VTS03-17-14LN-tmagArticle.jpg" width="600" height="400" alt=""></li>
<li><img class="img-responsive" src="http://cdn.themetapicture.com/media/cute-family-picture-portrait-penguin.jpg" width="600" height="400" alt=""></li>
<li><img class="img-responsive" src="http://www.petmountain.com/photos/product/giant/114420S519156/aquarium-power-filters/cascade-power-filter-for-aquariums.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<p class="photo-credits">
Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a>
</p>
<a href="#" class="prev prev-stage"><span>‹</span></a>
<a href="#" class="next next-stage"><span>›</span></a>
</div>
<div class="navigation">
<a href="#" class="prev prev-navigation">‹</a>
<a href="#" class="next next-navigation">›</a>
<div class="carousel carousel-navigation">
<ul>
<li><img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/01/digital-wallpaper-3.jpg" width="50" height="50" alt=""></li>
<li><img src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png" width="50" height="50" alt=""></li>
<li><img src="http://graphics8.nytimes.com/images/2014/03/13/learning/VTS03-17-14LN/VTS03-17-14LN-tmagArticle.jpg" width="50" height="50" alt=""></li>
<li><img src="http://cdn.themetapicture.com/media/cute-family-picture-portrait-penguin.jpg" width="50" height="50" alt=""></li>
<li><img src="http://www.petmountain.com/photos/product/giant/114420S519156/aquarium-power-filters/cascade-power-filter-for-aquariums.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-5">
<h3> Hello World </h3>
</div>
</div>
</div>
</body>
</html>
You can get jcarousel.connected-carousels.css and jcarousel.connected-carousels.js on jcarousel github .
The images were pulled randomly off the net, but all the images have different sizes, and only the stage images have the class img-responsive . However, when the page is viewed, all the images seem to be cut off in some way:
The first image seems fine, although I'm not sure because of all the problems with the other images.
The second image shows the camera cut off at the bottom lens
The third image shows the humanoid's feet slightly cut off
The fourth and fifth images have both been severely cut off.
Without img-responsive , the images are either stretched or cut off in some way.
How do I preserve the image ratios and have them fit inside the stage div?
1 answers
solution1
0 2014-08-07 07:05:12
Target the div id and/or class and use a style like this
.somediv img{
width:100%;
}
You could run into overflow issues but nothing that can't be fixed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.