I have a problem with my images they are not responsive
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 visible-xs">
<div class="overview-device-wrapper">
<img src="img/landing/landing-app-left-overview.png" class="img-responsive" alt="">
</div>
</div>
/* Small decives (phones, 320px and up)*/
#media (min-width: #screen-xs-min) {
.overview-device-wrapper{
width: 320px;
}
}
the image does not appear properly in a mobile browser
image on a pc screen
image on a mobile browser
the image should appear on the left not at the bottom in a mobile browser
Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the
Responsive Class
.img-responsive.
This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
Image Demo with Class:
<img src="..." class="img-responsive" alt="Responsive image">
Related
When I make the browser window small, the images are clumped together, I want to add some spacing between them, when they stack vertically, note that I also want to do this in pure bootstrap, because I know how to do it in css.
Code:
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://via.placeholder.com/250x250">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<img class="img-responsive center-block" src="http://via.placeholder.com/250x250">
</div>
#media (max-width: 767px) {
img {
margin-bottom: 15px;
display: block;
overflow: hidden;
}
}
You can use it with media query to control every element in different screens.
Thia code control the extra small screen like mobile screen.. it will add margin bottom to every image.
Follow the link to know more about media query
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I have been trying to get an image to float left of some paragraph text, then when the resolution reaches below 500px, the image becomes responsive and fills the top (width 100%) and the text is fully below.
The code I have does this:
It works on higher resolutions, but with smaller displays, the text in the blue oval gets very small.
I am using Bootstrap.
How do I achieve the effect I am after?
Thanks
#arttopcont:before {
content: ' ';
display: table;
min-width: 767px;
}
#artimg{
float: left;
width: 300px;
padding-right: 20px;
}
<div id="arttopcont">
<div id="artimg">
<img src="image1.png" />
</div>
text here
text here
text here
text here
text here
text here
text here
text here
text here
</div>
If you're using Bootstrap you can use the various sizing column classes to make sections bigger/smaller at different screen sizes col-{xs, sm, md, lg}-#.
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<div id="artimg">
<img src="image1.png" />
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
text
</div>
</div>
</div>
Update (without Bootstrap classes):
If I understand correctly, you are looking to have the image be full width with text underneath it at screen sizes less than 500px. You can achieve this using media queries.
#media (max-width: 500px) {
#artimg {
width: 100%;
display: block;
float: none;
}
}
Hopefully that helps!
Currently I have an image saved in my project of a map that I would like to include in my solution, my first website. I'm very new to ASP.NET and CSS but have some HTML experience. I am having trouble figuring out how to center and stretch the image appropriately so that regardless of the size of the browser window, the center of the map always remains centered accordingly.
Please advise!
<section>
<div class="container-fluid">
<div class="row">
<img src="/img/additional/map.png"/>
</div>
</div>
</section>
EDIT 1:
I've found on http://getbootstrap.com/css/#images the following information
Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.
SVG images and IE 8-10
In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
<img src="..." class="img-responsive" alt="Responsive image">
Added class="img-responsive center-block" according to http://getbootstrap.com/css/#images .
<section>
<div class="row">
<img class="img-responsive center-block" src="/img/additional/map.png"/>
</div>
</section>
Just simply add center tag to the image.
<section>
<div class="container-fluid">
<div class="row">
<center>
<img src="/img/additional/map.png"/>
</center>
</div>
</div>
</section>
If are you using bootstrap, you can do it:
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
You could also use pure CSS, for example:
.
center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
add class center-block
Ref : here
e.g : <img class="center-block" src="/img/additional/map.png"/>
I've the following markup for a page which is mobile ready:
<section>
<div class="cover-section">
<img src="img/central-park.jpg" alt="" style="width:100%" class="hoverZoomLink">
</div>
<div class="logo-section">
<div class="container postLeft hiddenClass visibleClass animated fadeInLeft">
<img src="img/logos/instagram.png" alt="">
</div>
</div>
</section>
The problem is, since I provided width:100% for the imgin the mobile view, the whole image is appeared to be proportionate and as a result, very small. (Since this image is very wide).
Is there any way that I can display the image with a min-height:300px without adding the image as a background and make it as cover ? Because the image is being generated dynamically in which case allocating it to a particular css class wouldn't be easy.
There's no other better way around this:
img{/*but target to specific selector that you need*/
min-height: 300px;
max-width: 100%;
}
This produce the responsive result but when minimum height fits the requirement then this starts stretching.
One better solution is to use image as background and using css like this produce better experience with responsive image:
.cover-section{/*remove img inside this selector to use it as background*/
background: url(image-path.jpg) no-repeat center;
background-size: cover;/*don't forget to use vendor prefixes*/
min-height: 300px;
max-width: 100%;
}
You could always use media queries to handle CSS for mobile devices. Something like follows : (I've moved your img styling to a class 'cover')
.cover {
width:100%;
}
#media screen and (max-width: 500px) {
.cover {
min-height: 300px;
}
}
</style>
<section>
<div class="cover-section">
<img src="img/central-park.jpg" alt="" class="cover hoverZoomLink">
</div>
<div class="logo-section">
<div class="container postLeft hiddenClass visibleClass animated fadeInLeft">
<img src="img/logos/instagram.png" alt="">
</div>
</div>
</section>
Not sure if this is what you want.
I have a set of Bootstrap thumbnails on my web page and I have set all the images with class .img-responsive. When I open the page on a mobile browser the thumbnails are appearing too small and I can't even resize them with css.
Here are my thumbnails:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/thumbnails/traditional.jpg" class="img-rounded img-responsive" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="images/thumbnails/mehndi.jpg" class="img-rounded img-responsive" alt="...">
</a>
</div>
... altogether 12 thumbnails
</div>
I have tried to edit the size of the thumbnails for mobile phone size devices with the following media query:
#media(max-width:767px){
.thumbnail > img {
height:70px;
width:120px;
}
}
However the width doesn't seem to surpass 80px, it seems like I can only set width up to around 80px and anything higher won't do anything.
If I leave the thumbnails like they are without trying the above CSS code they appear too small on mobile devices and I need a way to increase the size of the thumbnails on mobile devices only.
Here is a link to the site:
Change col-xs-6 to col-xs-12
So instead of
<div class="col-xs-6 col-md-3">
You'll have
<div class="col-xs-12 col-md-3">
This will make it so that each thumbnail will take up the full width of the phone, instead of having two across.
I have fixed the problem, I found that I had the below code elsewhere in my CSS that I didn't take notice of. This below media query was what made my images appear so small on mobile devices, I took it out and now images appear fine. Thanks for the help guys.
#media(max-width:767px){
.thumbnail > img {
height:40px;
}
}