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.
Related
can anyone help me, why my image won't load ?
<div class="card" v-for="movie in movies_trend" v-bind:key="movie.id" >
<div :class="['card-movie', movie.page]" :movie="movie.name">
<img :src="'../src/assets/image/kimi-no-na-wa-poster.jpg'+movie.poster" class="card-img-top" :alt="movie.name">
</div>
</div>
This is my dir
<div class="card" v-for="movie in movies_trend" v-bind:key="movie.id" >
<div :class="['card-movie', movie.page]" :movie="movie.name">
<img :src="movie.poster" class="card-img-top" :alt="movie.name">
</div>
</div>
your path of an image can be added to movie.poster
so your movie.poster will contain value '../src/assets/image/kimi-no-na-wa-poster.jpg'
you can add image tag in the following way also
<img :src="'../src/assets/image/'+ ${movie.poster}" class="card-img-top" :alt="movie.name"/>
In this case, your variable movie.poster will container only the name of image kimi-no-na-wa-poster.jpg
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?
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 have images placed in my website using the < img> tag. When the website is scaled to a smaller screen the images hang over the container. Why are they not scaling with the the rest of the site? Any fixes?
<div class="container">
<div class="col-md-12">
<div class="col-md-4 padtop">
<img src="img/WDadd.png" alt="" />
</div>
</div>
</div>
I dont know if this is the right way to do it, but it seems to be working for me you could try to add, give it the class thumbnail on the image, and if you dont like the look of thumbnail you can always edit it in your css file
example: http://jsfiddle.net/abnH6/6/
<div class="container">
<div class="col-md-12">
<div class="col-md-4 padtop">
<img src="http://lorempixel.com/500/500/" alt="" class="thumbnail"/>
</div>
</div>
</div>
I've got a carousel on my index page, but I've noticed that if I shrink my browser, the image doesn't stay within the whole carousel.
If you don't understand what I mean, here's an image of the carousel after shrinking the browser:
As you can see, the width of the image responds to the browser window size, but the height doesn't, leaving that big white space below the image.
Here is my current code:
<div class='carousel slide' id='hero' style='position: absolute;'>
<div class='carousel-inner' style='z-index: -1'>
<div class='active item'>
<img src='images/index/img1.jpg'>
</div>
<div class='item'>
<img src='images/index/img2.jpg'>
</div>
<div class='item'>
<img src='images/index/img3.jpg'>
</div>
<div class='item'>
<img src='images/index/img4.jpg'>
</div>
<div class='item'>
<img src='images/index/img5.jpg'>
</div>
<div class='item'>
<img src='images/index/img6.jpg'>
</div>
</div>
</div>
How do I make the images within the carousel respond to smaller browser windows?
So I've fixed it myself after some more research.
In the CSS, I had this:
.carousel-inner {
overflow:hidden;
width:100%;
position:relative;
}
I fixed it by putting the dimensions of the images instead of the 100% width, so:
.carousel-inner {
overflow:hidden;
width:1920px;
height:1200px;
position:relative;
}