This is my code structure...
<div class="container">
<div class="img-container" style="display:inline-block;">
<img src="image/exaple.png" style="width:100%" />
</div>
</div>
I need to increase the width of the image to 100%. but the img-container div not expanding to 100%. how can i resolve this?
Related
I'm having a problem scaling a png image with a transparent background with a width of 279 pixels and height of 432 pixels with class img-responsive on bootstrap3.
The Problem:
Whenever, I upload the png image inside the img tag with the class=
"img-fluid" it remains the same size as I scale. Other images seems to
work fine, but if I try to upload a bigger image it will become
responsive but only scale from very large to normal size, not from
normal to small.
My question is
What is the best way to optimize a PNG image for Bootstrap-3 with the class img-responsive?
HTML:
<div class="poster">
<div class="container">
<div class="intro-text">
<div class="intro-heading">Welcome <img href="../html/indexfinal.html" class="bigv" src="../images/logos/bigvlogo.png" alt=""/> <img href="../html/indexfinal.html" class="midv" src="../images/logos/midvlogo.png" alt=""/> </div>
<div class="intro-lead-in">Hi yall'</div>
<div class="container-fluid">
<img class="mascot" src="../images/mascot/wave.png">
</div>
<a style="float:left" id="guestsignup"></a>
</div>
</div>
</div>
It will work.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg" class="img-responsive" alt="Cinque Terre">
</div>
</div>
</div>
Resize the screen to see the difference.
You can add img-responsive class to existing code:
<img class="mascot img-responsive" src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg">
Hope that is what you are looking for.
So I have two image being used in two locations.
Location 1:
<div class="row">
<div class="col-md-1 col-md-offset-9">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
Location 2
<div class="row">
<div class="col-md-7">
<form autocomplete="off">
<div class="form-group">
<input placeholder="What are you looking for?" type="text" class="form-control" id="search" data-provide="typeahead" data-source='{{keywordsList}}'/>
</div>
</form>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-block{{#if entry}} btn-lg{{/if}}" style="margin-bottom:15pt">or just show me EVERYTHING!</button>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;margin-bottom:4px;">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
The images themselves are big and 512x512 and bootstrap decided to scale it down in location 1 to 79x79. Strangely, with the addition of an input field and a button in location 2, the images get scaled down to 59x59.
This whole scaling thing seems arbitrary to me and I'd really appreciate it if someone could explain the logic behind it to me.
The image width is dependent upon the column size. The reason for the discrepancy in image size between the two locations is because Location 2 was inside a <div class="col-md-10">.
What this did is it made the image smaller since the second location's width is 1/12 of 10/12 versus just 1/12 in location 1.
The image width depend on boostrap column size, if your image is responsive it will occupy all the column width
I'm using slick carousel (http://kenwheeler.github.io/slick/).
I have it set for 2 rows with 3 images per row. The trouble is, the second row is getting cut off right through the middle of each image.
Is this some known bug? Anything I can do?
html:
<div class="slick_slideshow" id="slideshow_houses">
<div>
<img src="img/slideshow_houses/image1.jpg" class="slideshow_houses_image" />
<div class="slick-credit">credit1</div>
</div>
<div>
<img src="img/slideshow_houses/image2.jpg" class="slideshow_houses_image" />
<div class="slick-credit">credit2</div>
</div>
<div>
<img src="img/slideshow_houses/image3.jpg" class="slideshow_houses_image" />
<div class="slick-credit">credit3</div>
</div>
<div>
<img src="img/slideshow_houses/image4.jpg" class="slideshow_houses_image" />
<div class="slick-credit">credit4</div>
</div>
<div>
<img src="img/slideshow_houses/image5.jpg" class="slideshow_houses_image" />
<div class="slick-credit">credit 5 </div>
</div>
<div>
<img src="img/slideshow_houses/image6.jpg" class="slideshow_houses_image" />
<div class="slick-credit">credit 6</div>
</div>
</div>
<!-- end slideshow -->
<div style="clear:both;"></div>
jquery:
$('#slideshow_houses').slick({
rows: 2,
slidesPerRow: 3
});
The code you have looks fine. Going by the comments, you had a div that contained the slideshow that had overflow:hidden. In general, any time you have cut-off content you should check any parent div for overflow:hidden.
I am using bootstrap framework.
<div class="container">
<h1>Menu</h1>
<div class="row">
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
</div>
</div> <!-- /container -->
Whitespace on the left and right sides of the images are also clickable - looks like .center-block is the culprit. How to solve?
A block spans the entire div, and centers by using margin. As a link, I would suggest instead removing the center-block from the images themselves, creating a class:
.center {
text-align: center;
}
and setting that class on the containing div, in your case:
<div class="col-md-4 center">
Or something similiar.
Also I would suggest placing your text description for each image into a div, since without the image being a block, the text would flow next to it. Simply placing the text in a paragraph tag would suffice.
Here is a jsbin to demonstrate:
http://jsbin.com/zamavoha/1/edit
Below is the code that I want to convert to div.
I tried html2canvas but that did not worked somehow.
The div's uppelayer middlerlayer and bottomlayer are one above other making 3 layers.
<div id="container">
<div id="bottomLayer">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSivV5yARSKfCsfaFmdo1Iwc7muglbp92befBPfS7XxglZ0XrpU" id="preview2" />
</div>
<div id="mediumLayer">
<img src="http://f0.pepst.com/c/B7F2F3/402463/ssc3/home/038/amazing.beauties/diana_penty_02_12x92.jpg_480_480_0_64000_0_1_0.jpg" id="preview" />
</div>
<div id="main">
<img src="http://f0.pepst.com/c/B7F2F3/402463/ssc3/home/038/amazing.beauties/diana_penty_02_12x92.jpg_480_480_0_64000_0_1_0.jpg" id="jcrop_target" />
</div>
<div id="upperlayer"><canvas id="canvas2"></canvas></div>
</div>