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">
Related
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'd like to use flexbox to create a flip card have an image (using the <picture> element) on the front and some information on the back site.
Images can have different width/height ratio, but should be always centric. I achieve this by using (actually the sizes attribute determines the width of the element):
<div style="display:flex;flex-direction:column;align-items: center;justify-content: center;border:red solid 2px;height:100%">
<picture>
<img src="data/IMGP7206_sized.jpg"
srcset="data/IMGP7206_sized.jpg 4189w" alt="photo"
sizes="60vw">
</picture>
</div>
The backside of the card should be the same as the front, which is defined by the image size. Current CSS implementations of flipcards assigning an fixed width/height to the container. I would like to end up with something like this:
<div style="display:flex;flex-direction:column;align-items: center;justify-content: center;border:red solid 2px;height:100%">
<div class="flip-container">
<div class="flipper">
<div class="front">
<picture>
<img src="data/IMGP7206_sized.jpg"
srcset="data/IMGP7206_sized.jpg 4189w" alt="photo"
sizes="60vw">
</picture>
</div>
<div class="back">
SAME SIZE AND POSITION AS IMAGE
</div>
</div>
</div>
</div>
Flipcard structure was taken from David's page.
Is there a possibility to get this done using CSS only?
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
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.
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/