I'm struggling trying to get images responsive in a container and it's driving me bonkers. I've looked at many different answers and the only one that seems to work is just making the image set to 100% of the width of the container (not using max-width), but I don't want to set the image at 100% all the time. Here's what I got:
HTML
<div id="interior_banner" class="title_pic">
<img src="assets/images/portraits_header-24.png" />
</div>
CSS:
img{max-width:100%;border:3px solid #fff}
.title_pic{text-align:center;margin:0 0 1em;}
Now setting the img to just width:100% works, but I really want this banner to flex only when it doesn't fit the container. I don't want it to size before then.
What am I missing? I know it's something.
Thanks in advanced!
With out a live demo this is a little harder but I'll give it my best go.
I think you're on the right path. Currently isn't the image it's regular width? It should shrink when the container gets small enough. But if the container is bigger than the image the image won't scale up.
Or do you want the image to scale up? More info would be awesome.
Related
I am helping a friend setup a web site for his company. At the top of the page, below the navigation bar, I have a background image of a house that is set to 100% width, image size is 2400px x 1602px. My problem is how to control the image so that the house is always front and center. I also need to keep the height at (or around) 75vh.
I have tried using background-size: cover and contain, as well as setting background-positions. But with the way cover works, the house is not always centered. Especially when browser width is larger--then only the roof of the house is visible. Next I tried using the aspect ratio of the image for padding. This works well, but does not allow me to set height (as far as I can tell) so with larger screens I end up with the height being way to big.
Was hoping someone might have a suggestion that would help me out and point me in the right direction. What I would like to have in the end is an image of a house where the house is always viewable and also be able to keep the height # 75vh. I have a feeling that media queries may be my answer, but wanted some advice before I continue on that path. Also wasn't sure if I need to crop my image to limit the height? I have tried so many different things that I am not sure how to proceed. Thank you for any suggestion, I really appreciate it.
I think the background cover image is the right approach, you might just have something wron gin your code that is not centering the image and that is why you only see the roof (top part of the image I assume) instead of the middle part in very panoramic screens.
Here is the code I would use:
This is the HTML
<div class="header">Your menu and other header stuff goes here</div>
<div class="bg_image" style="background: url('https://www.marriedwithmoney.com/wp-content/uploads/2017/06/house-1024x698.jpeg') center center / cover no-repeat;"></div>
And this is the CSS
.header {
width: 100%;
height: 200px;
background-color: #ccc;
}
.bg_image {
width: 100%;
height: 75vh;
}
and here is a working example which does what you inted if I understood your situation correctly https://codepen.io/anon/pen/REerRR
Hi I don't know how to solve this...
I want the element marked with a red rectangle in the images to move depending on the size of the screen ALIGNED to the containers below ALL THE TIME. I'm making a responsive website with the different media screen instances but I want to be sure that this element keeps in the same alignment all the time. How do I do that? No JS please.
http://www.awesomescreenshot.com/image/58399/669844960fdd9761084f64bae5d29112
since you haven't provided any code for what you have so far its difficult to help you. However, I think I understand what you need and you need to specify some width constraints to accomplish this:
you will need a container inside the header that will have the same width as the content below. Here is a working fiddle
css {
width: X%;
}
How to scale image in email body ?
I am adding html template in an email.And there is an image in that template.
And i wants,the image should be fit according to email client width.And the height should be adjust according to image width.Something like this:-
It should work in all email providers.
FYI,i am working on ASP.NET application.
Edit:
I sets the image width 100% and i am not setting the image height there.
Is this a best or correct way for it?
I would go for setting:
width: 100%;
height: auto;
Demo: http://jsfiddle.net/gjtC9/
Without CSS: http://jsfiddle.net/gjtC9/2/
The question if it's the best and correct way.. well if someone opens the email on a mobile phone where is the resolution quite small - so the huge image is scaled to smaller one quite a lot.
-> The phone will be loading huge image which will be scaled to small - this brings me more to question, is that picture really necessary? Are you going to put there those pinguins or some image that has some information or something valuable on it? :D
Use inline styles.
Like this:
<img style="width: 100%; height: auto;" ...
Ensure your img tag is not in container that sets or restricts height of the image
If you still need a container or have difficult interaction with other styles, use max-width, not width.
<img style="max-width: 100%" >
In the following image, you can see that the actual email body starts under the to object of email. I am not able to understand why do you want to do something more wide.
From your image: The image image you are providing, the photo is scaled correctly. It fits the div wrapping it, from left to right.
In my image: Well its just a text, but you can see the text starts just under the to object.
Result: You can not scale or make the image wider than this. However, I am sure you understand that you when you set the width to 100%. The browser actually does provide a 100% width from that width. Exceeding this size will maybe cause a bit problem in UI and gmail will never allow you that.
I hope you get my point.
I've set up my stylesheet to have a container (#container) holding the header/content/sidebars/footer/etc and I've put that in a main wrapper (#mainwrapper). The effect I'm trying to achieve is similar to College Humor's website; the ads on the side. I'd like to have a division on the left and right of the container. What I've done is set it up like this.
<div id="mainwrapper">
<div id="leftwall"></div>
<div id="container"></div>
<div id="rightwall"></div>
</div>
Basically, I want to be able to put an image (or bg image) in the leftwall and rightwall divs, however, I don't want it to trigger the x-scrollbar. I only want it visible if the viewer's resolution is high enough. Otherwise, just display #container.
I've set them to float: left, so that they appear on the left and right of the container, but I'm a stuck as to how to make them appear as a background image.
The reason I want to do it this way is that I already have a background image and I want to keep it optimized. So, instead of having a large image that spans 960+ pixels (#container width), I can have 2 images that are 100px wide. (the width of #leftwall and #rightwall)
I hope this is understandable and thanks to anyone trying to help in advance!
Have a good day, Brian.
I understand what you want. These days new media queries has been added to make these type of design.
You can define it in your css files for a particular resolution or mobile devices.
#media screen and (min-width: 1080px){
#leftwall, #rightwall{display:block;}
}
#media screen and (max-width: 1024px){
#leftwall, #rightwall{display:none;}
}</pre>
Below is the link where you can learn how to use these queries.
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Hope This Helps,
Cheers,
I am not sure what you want to achieve; maybe you could show how your css look like so far but have you tried by giving a min-width to the external containers?
I set up a fiddle with what I think you're trying to achieve, you'll just have to change some numbers to fit your needs: http://www.jsfiddle.net/KrfVR/14/
Adjust the size of the result box to see the side divs appear/disappear.
This is a problem with a theme that I bought, and I have already tried to contact the owner (with no luck).
It should be a fairly easy fix, it's just that I can't work out how to do it! (I have done my research).
You can view the theme here: http://igeekify.com/_templates/liftoff/www/
To re-create the problem, just drag the window size so that it is smaller in width than the content, then scroll to the right. You will notice the header background doesn't stretch all the way.
The background image is for the DIV '#frame-header', which has the class '.wrapper'. I believe that the problem has something to do with the width of '.wrapper' which is defined.
Any help is really appreciated!
I think you might need to add a min-width property to the 'frame-header' div:
<style type="text/css">
#frame-header
{
min-width: 940px;
}
</style>
Try using the following code:
image width:100%;