according to http://getbootstrap.com/css/#images-responsive, I want to make my image to support a responsive website by using
<img src="..." class="img-responsive" alt="Responsive image">
But it is not working.
Here is my code,
<body>
<img class="img-responsive" src="images/myImage.png" />
</body>
The original image size is 284x191
When I open a browser on 1920*1080 screen size, the image size is 284x191. But when I open a browser on 1280*720 screen size, the image size is still the same.
I don't know what I did wrong to reduce the image size dynamically.
Thanks for help.
In Bootstrap 4 the syntax is class="img-fluid"
All you need is width:100% .
Using col-xs-12:
<img class='img-responsive col-xs-12' />
Or
<img class='img-responsive' style='width:100%;' />
Try this code
img-responsive makes the max-width:100% If you want the image to be full width (even though it's actually much smaller than the width of a typical screen), you need to force it to be width:100%...
http://codeply.com/go/fDNOBhaQPS
You need to wrap your Img tag with any bootstrap class. As I did as div with col-lg-4 class.
<div class="col-lg-4">
<img class="img-responsive" src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/36/gd/p036gdwj.jpg" />
</div>
or
<img class="img-responsive col-lg-4" src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/36/gd/p036gdwj.jpg" />
If you not wrapped with div tag
Link : http://codepen.io/anon/pen/MygbNO
I had the same issue.
I realized that I was using bootstrap 4 (and not 3).
Changing it back to bootstrap 3 fixed it for me.
It is important to know what version of bootstrap you are using. This is because the technique used to make images responsive keeps on changing from version to version.
I tried <img class="img-responsive" src="<your-URL>"> and <img class="img-fluid" src="<your-URL>" but none of it worked for me.
For Bootstrap V4.5, use:
<img src="my-URL" class="img-fluid" style="max-width: 100%; height: auto;">
Modify <img class="img-fluid" src="<your-URL>" to include styles, then it will work. The reason for this is so that it scales with the parent element.
You can read the Bootstrap documentation on images to learn more.
use class="img-fluid" for bootstrap 4 version
Related
I'm using the following html on a component in Angular to show a thumbnail image based on the users screen size.
<div class="col-12 col-lg-3 col-md-6 col-sm-6 col-xs-12">
<img class="d-none d-sm-none d-md-block d-lg-block img-fluid img-thumbnail" src="api/thumbnail/{{auctionListItem.thumbnailId}}/240/150/thumbnail.jpg">
<img class="d-lg-none d-md-none img-fluid img-thumbnail" src="api/thumbnail/{{auctionListItem.thumbnailId}}/400/300/thumbnail.jpg">
</div>
On smaller screens the picture takes up the whole width of the page and for these users I show a bigger picture. I could also solve this by only having the bigger picture and scaling it to fit for all users. But that would use unneeded bandwidth for about 50% of the sites visitors.
My problem right now though is that BOTH pictures are being downloaded for everyone.
So my question is, is there a CSS solution to tell the browser to only download the visible image, if not what would be the best way to solve this with angular? Do i need to get the pages width and use *ngIf to hide the image tag not being used?
This isn't possible with CSS as you noted, however you can do this with Angular by changing the src property dynamically. You'd have to bind the the window.innerWidth value to the [src] value on your image tag. So something like this:
if (window.innerWidth > yourMediaQueryBreakpoint) {
return this.loadSrcImg = 'your-image-url';
}
Then bind it in the template:
<div class="col-12 col-lg-3 col-md-6 col-sm-6 col-xs-12">
<img class="d-none d-sm-none d-md-block d-lg-block img-fluid img-thumbnail" [src]="loadSrcImg">
<img class="d-lg-none d-md-none img-fluid img-thumbnail" [src]="loadSrcImg">
</div>
I haven't tested it, but hope this helps.
I think the best way to solve this is in your ts. In that way you are reducing template compile time As there will be atleast two conditions.
I think you know how to do it, but for future user's sake, I am writing following piece of code.
TS
this.imgSrc = window.innerWidth > 768 ? ('api/thumbnail/' + auctionListItem.thumbnailId + '/400/300/thumbnail.jpg') : ('api/thumbnail/' + auctionListItem.thumbnailId + '/400/300/thumbnail.jpg');
HTML
<div class="col-12 col-lg-3 col-md-6 col-sm-6 col-xs-12">
<img class="img-fluid img-thumbnail" [src]="imgSrc">
</div>
Use a media query in CSS and only use it for PRINT, and substitute a different URL for printing only. You may want to load it but hidden to make sure the onlyuseforprinting.jpg below is in the cache. Apparently this may not work reliably on Chrome unless the picture is in Cache.
<style type="text/css">
#media print {
#test:after {
content: url("./images/onlyuseforprinting.jpg");
}
}
https://developer.mozilla.org/en-US/docs/Web/CSS/#media
https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/
The main problem of CSS tricks is that all pictures will be downloaded. Try below code to download only specific photo based on screen width.
<picture>
<source media="(min-width: 800px)" srcset="images/large.jpg">
<source media="(min-width: 450px)" srcset="images/small.jpg">
<img src="images/large.jpg" alt="">
</picture>
or try this
<img src="images/large.jpg" sizes="(max-width: 600px) 480px, 800px" srcset="images/small.jpg 480w, images/large.jpg 800w">
For performance reasons, I want to use large-size images for desktop and smaller-size ones for mobile devices as my carousel slides.
I tried below code with only limited success:
<picture>
<source srcset="images/s2.jpg" media="(min-width: 768px)">
<source srcset="images/s2m.jpg">
<img class="second-slide" srcset="images/s2m.jpg" alt="2">
</picture>
Where s2m.jpg is the default (small) image and s2.jpg is the larger one.
The carousel works and selects the correct image depending on the screen size, but loses original responsiveness. That is, slides are not resized to the width of the parent element (.item). Instead, they are just cropped.
What is the proper way of achieving this?
In my opinion the problem can be solved with the HiSRC Framework - https://github.com/teleject/hisrc. You can then use the attributes data-1x or data-2x in the -Tag to define the different sized image sources in it:
For example:
<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/>
and insert the following jQuery Code in your Script to "activate" the HiSRC-Framework and give the Element around the pictures the class "hisrc":
$(document).ready(function(){
$(".hisrc img").hisrc();
$(".hisrc img+img").hisrc({
useTransparentGif: true,
speedTestUri: '50K.jpg'
});
})
<div class="hisrc">
<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/>
</div>
Hopefully it is helpful for you ;)
Actually, when you resize the window, the carousel is not supposed to decrease in height to cope with the changing width. This will distort the view of the page. It's the feature of bootstrap carousel to do so.
Regarding responsiveness, when you load the page in small devices (I mean no resizing in desktop browser) you will see the relevant slide image is only loaded anyway. I think this should work for you.
However, if you require to resize the images in height when width decreases, you can achieve using CSS
img{
width: 100%;
}
See this codepen for information.
Note: You might not want to impose the style to all <img>, so use wisely
Just create a css class and use it as follow:
.fitImage {
width: 100%;
box-sizing:border-box;
}
<picture>
<source srcset="images/s2.jpg" media="(min-width: 768px)">
<source srcset="images/s2m.jpg">
<img class="fitImage second-slide" srcset="images/s2m.jpg" alt="2">
</picture>
I did it like this:
<div class="carousel slide d-none d-sm-block" data-ride="carousel" data-interval="4000" data-pause="hover">
<div data-aos="fade-down" data-aos-duration="1000" class="carousel-inner aos-init aos-animate">
<div class="carousel-item active" style="cursor: default;">
<img data-delayed="1" data-href="" class="img_slider d-block img-fluid w-auto" lsrc="/images/carousel/autoskola.jpg" alt="" src="/images/carousel/autoskola.jpg">
<div class="carousel-caption">
<p class="welcome_message"></p>
<p class="slogan"></p>
</div>
</div>
</div>
</div>
<div class="carousel slide d-block d-sm-none" data-ride="carousel" data-interval="4000" data-pause="hover">
<div data-aos="fade-down" data-aos-duration="1000" class="carousel-inner aos-init aos-animate">
<div class="carousel-item active" style="cursor: default;">
<img data-delayed="1" data-href="" class="img_slider d-block img-fluid w-auto" lsrc="/images/carousel/baner-mobilni.jpg" alt="" src="/images/carousel/baner-mobilni.jpg">
<div class="carousel-caption">
<p class="welcome_message"></p>
<p class="slogan"></p>
</div>
</div>
</div>
</div>
so with d-none d-sm-block and d-block d-sm-none will hide / show carousel for certain screen sizes and with lsrc I will disable loading images, note that I will rename it back to src with javascript.
I have a block:
<section id="why">
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="img/image.png" alt="image">
</div>
</div>
</div>
.container have a margins of left and right, and i can't position image on left of body.
I need to pull image on left of body, and i need to make it responsive.
it looks like this
Give this a try.
You don't need the container, row or col divs.
<section id="why" class="text-left">
<img src="img/image.png" alt="image">
</section>
To make an img responsive use this:
<img src="..." class="img-responsive" alt="Responsive image">
The .container has a padding of 15px on each side. By using a tool like Chrome Inspector, you can see the styles that each div has.
If not inspector, try removing each div that you have, one at a time and seeing how each one works. The time it took to ask this question, you could have narrowed it down by simply experimenting.
The official website is more than useful, is very well-documented, and it will clear up a lot of things if you take a little bit to read through it.
http://getbootstrap.com/css/
give this a try
<div id="why" class="pull-left">
<img src="..." class="img-responsive">
</div>
you will now have a responsive image. But take note that the class img-responsive by default is display: block. if you want to resize the image, just set the width and height of the image.
CSS
.image {
height:50px;
}
HTML
<div class='span6'>
<img class='image' />
</div>
<div class='span6'>
<img class='image' />
</div>
Is it possible to cancel the style when the Bootstrap's responsive works?
I need these image to be displayed without crop by CSS, assuming that the picture's height is 400px.
Thank you
You need to surround the images with a maximum width that you wish them to be able to go. Preferably in percentage so that it scales on all devices.
Then add the class="img-responsive" to your image tags.
For example
<img src="/path/to/your/image/logo.png" class="img-responsive" alt="Something about the image">
I have this markup:
<div class="girls" style="text-align:center; margin-top:100px">
<img src="images/1.png" />
<img src="images/2.png" />
<img src="images/3.png" />
<img src="images/4.png" />
and this css (I'm using Twitter Bootstrap) :
img {
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
The images have equal width and height and are displayed inline.
On my resolution are ok, fit the entire width (1366px), but on lower resolutions the images don't fit.
So, I need to keep the proportions on every screen resolution ( lower than 1366px in my case)
I've found this picturefill
Which I think is helpful for me, but I'm thinking that it's a simpler solution for my case because I have 4 images which I need to display them horizontally and make them scale on every resolution.
Thanks!
You can set the style width attribute of the images to 25%, without specifying height. That's gonna work if you're always putting 4 images, they have the same width between them and your container div is always at 100%.
HTH
Francisco
If you are using Twitter Bootstrap, then use markup properly like in Twitter Bootstrap documentation:
<div class="row-fluid">
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div>
http://jsfiddle.net/zNLBG/