I am currently working on making http://preview.j64e7zzvo82p4x6r4fdjze6piimmfgviwsruf9j89pidaemi.box.codeanywhere.com/ responsive and for some reason there are images that are too big that cause the width of the body to be larger than the viewport.
The problem starts as soon as the screen is sized down to anything below 991px.
If I load the page with no images then it is fine but I am currently hiding the images by using (display:none;) when the screen is sized for mobile devices. So I don't understand why it is still happening.
Any idea?
For images to be responsive in bootstrap, you need to add the class "img-responsive" to them. then they will fit nicely.
The thing is that the image is 900px wide, to avoid that you need to set a % width to the image, eg:
.online-store-image img{
max-width:100%;
height: auto;
display: block;
}
Or if you want to hide the rest of the image and maintain the same size, you can set:
.online-store-image{
overflow: hidden;
}
In this case you're using Bootrstrap, so you may want to add the img-responsive class to your images, so they can adapt to the container.
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.
Related
I want to make an image good for a responsive layout. I am using an large .svg image at the moment which resizes to any and still looks sharp.
However, when I put the image in a div it is sometime too big or small. I just want it to fill the screen properly.
So far I have coded:
img{display:block;}
but am sure theres more to it...Anyone?
To make your image change size dynamically (and stay within your div), give it a max width and set the height to auto.
.imgcontain {
max-width: 50%;
}
img {
max-width: 100%;
height: auto;
}
<div class=imgcontain>
<img src="https://images.unsplash.com/photo-1542044896530-05d85be9b11a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" />
</div>
It is often said that it's best to specify image sizes in img's HTML attributes, width and height. That way the browser can reserve the space for images that haven't initially been loaded yet, so that once they do load, they don't change the page layout by making the content below them jump as they appear. (I'm sorry to say I don't know what this technique is named so I don't really know how to search for this question specifically, thus this question)
What I'm wondering is how this is solved in responsive layouts? I know on a big desktop browser my news articles' images may be 400x300 px, for example, but I can't put that into my document, as:
<img src="/thumbs/article_image_400_300.jpg" width="400" height="300"/>
Because on a smaller browser I would also like my images to be smaller. But I would still like to keep this behaviour of reserving space, if possible.
Can this be done?
Put the height and width attributes into your HTML, showing the actual size of the image file you are using.
Then add this to your CSS to allow images to scale responsively while maintaining their aspect ratio:
img {
max-width: 100%;
height: auto;
width: auto;
}
Now set your desired image width for each breakpoint in your media queries, as a percentage of the width of the parent element.
For example:
img.medium {
width: 60%;
}
img.small {
width: 30%;
}
The widths set in your CSS will override those set in the HTML.
This question already has answers here:
CSS: center and scale up or down image while preserving aspect ratio
(4 answers)
Closed 7 years ago.
I am building a responsive website. On the homepage I have a number of articles whose thumbnails should be displayed at 230px * 115px at full size desktop output. The article publishers will be uploading images of all sizes with no particular set aspect ratio.
I currently just have code to resize an image based on it's parent container. the width will be 100% of it's parent container and the height is automatic and will vary depending on which aspect ratio of the original image.
.img {
width:100%;
height:auto!important;
}
Is not really cutting the mustard.
My research suggest using a background img with background-size:cover. Is this a good way to go is it possible to center the cover horzontally and vertically? And work responsively?
Abit more direction would be great there are alot of articles our there but I can't find the exact answer to my needs.
update: #LGSon That's Great thankyou. It's the best solution I have tried so far.... I like the way the image is controlled within the div. Perfect. I guess the difference is now how to control the aspect ratio of the div. if i set the width to 50% the height it still fixed.
Your <img> rule is good, but you have to pack each <img> into another container that gets a percentage-based width and height: auto;
You can do this:
CSS
div {
display: block;
overflow: hidden;
}
.img {
width: 200%;
height: auto!important;
margin: -50%;
}
HTML
<div>
<img class="img" src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png">
</div>
DEMO HERE
You should set the image rule to, along with your other rules.
.img {
width:100%;
max-width:100%;
}
Will you know the dimensions of the image or are they unexpected?
The rule above is meant if you control the image and its accordance to your ratio in the design.
height is auto by default and adding !important to it does not make much of a difference.
Using a background image is a neat feature but cover will not do the job as expected. It covers the container with the images stretches or shrunk as needed to fill it entirely. Background images are also not recommended for performs reasons as they are loaded regardless of being displayed on the page or not as part of the css file, unless you load CSS files on demand with that request which is not necessary.
Hoep this helps, I will be glad to clarify.
I also disagree with the comment made about setting the parent container's height to auto as it does nothing. This is the default behaviour...
I'm working on a site that was developed by another person. This site is designed with wordpress by override a base theme(blankslate). This is the link:
http://www.good-look.it
There is a problem. When you resize the browser window you can see that the div with white background is responsive, but its not. On mobile the problem is more visible. I can't find a solution. Maybe is a problem with the plugin that manage the image slides(NextGEN Gallery by Photocrati)?
The problem is in this file: http://www.good-look.it/wp-content/themes/blankslate/css/struttura.css
There are numerous CSS styles with "!important" on them. For example:
wrapper {
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: top;
width: 940px !important;
}
The width of this container will always be 940px with the way you have it now. Turning this style off in Firebug "fixed" the "Brands" section. There are numerous problems in the CSS though that will affect responsive behavior.
First off, I thing we should be clear that the site is made with html, css, php, js etc --- so WordPress is really pretty irrelevant.
Most of the site isn't really planned in a way that is going to be responsive, but the specific problem of the white div, is that it is responsive, but the slider within - is not responsive, and uses absolute positioning --- so it's position is falling out of the parent div, and then making the content wider than the white div, and therefor wider than the window itself.
Did some quick styles in the inspector --- the slider's actually sorta "responsive."
replace
.wrapper {
width: 960px !important;
...
with
.wrapper {
width: 100%;
max-width: 940px;
...
and it will get you a little closer...
while designing a responsive site make sure that while defining width use %age instead of pixels like(940px). bcoz it arranges your div in %age according to your current device size but while defining width:940px it will take that amount of width irrespective of your screen size...
I'd like the carousel to scale proportionally the background image
in this question Bootstrap Carousel Image does not scale proportionately it is suggested to leave the image explicit dimension but I can't understand what it means.
Set this in your HTML
For every img element in your carousel, you can set the width property to 100% like this (although you shouldn't need to if the natural resolution is larger than the control):
<img src="http://i.imgur.com/OEdBxVD.jpg" width='100%'>
normally, this image would be too small to expand fully, but 100% scales it up.
make sure you don't have the width or height set to any pixel sizes
jFiddle
Since the image is going to go full screen, you should try to get your hands on a resolution that will naturally try to take up the full width available. When the browser has to scale the image up, it will cause artifacts.
What they mean is to leave off the width=px and height=px from the image (or image styles). You can set width="100%" and leave off the height. The browser will scale proportionally for you.
Try this option without the inline styles. Just add this to your stylesheet to override the bootstrap.css style.
.carousel .item {
width: 100%;
/*slider width*/
max-height: 600px;
/*slider height*/
}
.carousel .item img {
width: 100%;
/*image width*/
}