I am making a responsive website where I have used the img attribute in the HTML markup so that images scale nicely, to the point where they are moved about with media queries.
(Similar to this fiddle http://jsfiddle.net/QfDv5/ except I have used seperate images.)
However, for ease of updating, I want to add the image paths to the css file instead of the HTML markup. I thought the img-background attribute would be good to do this. That said, I want to stay away from 'background-size' attribute since older browsers don't play nice with it.
I thought of making an element within each of the scaling class divs. The div scales horizontally IF I declare a fixed height, but I cannot seem to get it to scale vertically automatically. I added:
#test-2{
width:100%;
height:100px;
background-image:url("http://www.desibucket.com/db2/01/26039/26039.jpg");
}
jsfiddle
What am I missing in getting the new element to scale without a fixed height?
How can I get the actual background image to scale with the new element?
Thanks
solution is using media queries and set the exact height you want.
media screen and (min-width: 1234px) and (min-height:700px) {
image {height: xxxpx;}
}
Related
I'm using HTML5's <picture> tags to create a responsive header that will stretch the entire width of the browser. The header uses an image as the background.
For larger screens I limited the height to a defined value. However, I noticed that a certain breakpoint the image starts to stretch and distort the image.
I'm familiar with using CSS's background-image: url(); to create a mask in order to prevent the distortion, but I don't know what best practices are with <picture>.
My code currently stretches and distorts the image. Is there a way to 'mask' the image?
First thing you should know is that if you will give height to any image then in some screens it will stretch.
So instead of giving the height you should take the image of exact size it will do the thing.
If you can share the code I can fix it and send it to you.
Hope it helps.
User zgood was able to lead me in the right direction. Adding object-fit: cover to the <picture>'s <img> tag got the job done.
Need some help figuring out why the bottom images keep pushing out. I have a responsive grid layout and developing a personal webpage. Images are setup to display in a 4 column layout with a media query set up to change to a 2 column layout # 800px. When I resize the browser width by dragging the edge, the layout breaks then resolves itself on and off every few px the window is reduced by. E.g. at 800px the layout is good, 799px it breaks, fine at 797px and so on. Why is this happening?
Link to the page HTML and CSS
<p data-height="265" data-theme-id="0" data-slug-hash="VMeJMq"
data-default-tab="css,result" data-user="smedz28"
data-embed-version="2" data-pen-title="Media query breaking"
class="codepen">See the Pen
Media query breaking
by Marc Smedley (#smedz28)
on <a href="https://codepen.io">CodePen
</a>.
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js">
</script>
codepen
As the images in the codepen have no source, it is not possible to replicate the behavior.
Using the DOM inspector, all images have max-width:100% property defined. Due to the CSS Box Model, this might lead images to be greater than 100% width, as they also have border:3px set.
Try adjusting the max-width to compensate for the borders:
img {
max-width:calc(100% - 6px);
}
or
img {
max-width:calc(100% - 6px) !important;
}
If you need to force an override of other selectors.
So it looks like jae.phoenix was correct with the image size in a way, it wasn't so much the container size and HTML/CSS. It was the actual image sizes that were breaking the layout.
I resized all images and the layout seems to be working perfectly
Reduce the width of your images to see if that solves your problem? – jae.phoenix
I admit in the beginning that I am new to UI development and started learning recently. I am developing a website which i similar to InuitLabs.com. When I looked at the source code using view source I am totally lost. Particularly I am interested in knowing
How the slider image on the homepage is responsive? Is it through javascript or using pure css.
Also I want to know the text moves upwards on scrolling leaving behind the background image intact? How to achieve the same effect.
I know this might be the basic question but I found it hard to know through the source code as there are many javascript and css files.
Regards,
Pradeep
Take a look at the background-size property.
you can set background-size to any px or % value or use constants:
cover will adjust the image size to fill the entire container while contain try to fit the image inside the container without cropping it, most likely leaving some parts of the container without any background.
What you probably want is to set your background-size property to cover.
you just set the image to the percent you want in % through css for example:
.slider img {
width:100%;
}
edit: also you need to specify the height as auto, if you do not want to lose the image ratio. if you set width and height at 100% the image ratio will be messed up.
if you want to set responsive height also for longer device then use width:100%; and height:100%; other wise you can use height:auto; make div and keep it background-size property for it.
Hi I'm trying to create a Responsive Email Template.
I can't make the background images responsive.
Here is a sample of the images code:
a#learn-more { background-size: 100%; display: block; background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/learn-more.png')no-repeat; height: 68px; width: 600px; margin: 0 auto; }
Basically We have the following images that I am having a hard time making fluid (responsive)
-logo (a#learn-more)
-banner image (.banner-img)
-learn more button (a#learn-more)
-image1 and image2
I have my demo here: http://jsfiddle.net/nLxjU/3/
Hope you can edit the code to see what my issue why I cant make them responsive.
I'm really stuck here.
You can use a different div with absolute positioning, and containing the image inside it with percentile width and height, so when the screen size changes, the div (and the image inside it) resizes, too. Just place the div below everything with z-index and you're done.
Email-clients, like Outlook (-Express), Mail (OSX) etc, all use different html-engines, and have a lot of restrictions. Especially Outlook seems to be using a limited IE6 based rendering engine. Background images and styling by css classes don't work, and forget about absolute or relative positioning.
Make sure the template also looks good in these email-clients, unless you only aim at mobile email clients (they seem to support all of this).
Take a look at the standards guide (html/css) at http://www.emailology.org/.
You can improve with the following, but as #Willem says you really need to change your approach if making an email template. Many email clients completely remove the head and strip out styles. Some support a limited set of inline styles for formatting and none for layout. In fact an old-school table layout with inline styles is generally the best way to go.
You might find some of this useful: http://www.campaignmonitor.com/guides/mobile/
As for making the best of what you've got so far:
Your .divider and .banner-img elements were set to 600px wide.
Set them as 100%.
Don't have the banner as a background image.
Size your .lpanel and .rpanel images as 100% of the parent's
width.
Demo: http://jsfiddle.net/nLxjU/
Here is a fiddle.
There is a standart trick with display:block; and max-width:100%; for responsive images:
img {
display: block;
max-width: 100%;
}
If I resize the width of the container, my image fits this width and also automatically resizes it's own height. This is very great image behavior! Also it doesn't use Javascript.
So, is it possible to do the same trick by resizing the height of the container? I want this image to fit containers height and also automatically resize it's own width proportionally. Of course, without any Javascript, just CSS or any experimental CSS3 features (I know how to do it with Javascript, really).
Add
max-height: 100%;
Also, try not to work with tables - they behave (more) unpredictably than other display types.
See here a most basic example.
EDIT: Couldn't find a way to do this without JS. I have put two methods for you in here - both could be used easily (I've used jQuery, but you don't have to). If that doesn't suffice, than good luck.