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.
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
I am trying to put together an application, and in the header for this application i have a table with 3 columns, one is the application logo, one is some text with the application title, and the third column is to dispay the users company logo by looking up which company they are assigned to...This all works just fine...
However the problem I am having is that images can look a bit distorted because i am using img height=90px width=90px src...
Is there anyway i can change this so that the height is 90px and the width is a proportional scale % to keep the image looking correct...
Just set the height to 90px (and don't set the width). By default the browser will maintain the image proportions unless you set the width.
thanks, that was a good answer, i actually found something else about 20 seconds after posting which has worked great...
img style="max-width: 100px; height: auto; " src="image.jpg
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.
A few weeks ago I working on this site. This is my next portfolio site. I want to make this structure, when I finish:
Header
Horizontal image gallery with floating height
Footer
I want to create something similar, just like the 22slides.com portfolio sites for photographers. If you change your browser's window size or press full screen button, the img element or the image's div automatically change his height.
I putted in the CSS a "max-height" parameter, to prevent the images never become bigger than their original resolution. It's a serious issue on huge resolution screens. but in Chrome it's not working properly, because the aspect ratios become wrong. If you press full screen, the aspect ratio more bad. In every other latest browser (Firefox, Safari, Opera, IE8-9) working normally. I created a custome CSS only for chrome with this command (but now I uncommented this in HTML to show you the Chrome aspect ratio problem):
#portfolio img { max-height: none; }
So with this line, the images using the biggest possible height in Chrome and the aspect ratios are correct. But it's a problem for me. I not want that a 1024x683px image showed bigger than his actual resolution on a FullHD monitor.
I think the best solution, if there's a javascript, which is dynamically escribe a width and height for every single image and keep the original aspect ratio. 22slides.com using something similar javascript, but I'm not a javascript programmer at all. :(
The images HTML structure:
<div id="portfolio">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
</div>
CSS (max-height is very little number, just to show you the problem in Chrome):
#portfolio { white-space: nowrap; float: left; }
#portfolio img { height: 100%; width: auto !important; min-height: 150px; max-height: 350px; }
I'm using this Jquery Javascript to dynamically change the image's height and bring back the image's overflow on the screen with 130px negative height. Probably not this script causing the problem, becuase if I turn it off, the aspect ratios are more bad in Chrome:
// Dynamical vertical resizing on images and Correct the height (to not overflow the screen)
$(document).ready(function(){
$(window).load(function(){ // On load
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
$(window).resize(function(){ // On resize
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
});
I need help! Thank You!
Update:
This javascript written by "Emphram Stavanger" and "nick_w" seems to solve my image fit to browser height problem:
Imagefit vertically
I tried and it's perfectly working with one single image. The image fitting in the available viewport window perfectly, with correct aspect ratio! There is a visual explanation for our problem made by "Emphram Stavanger":
http://www.swfme.com/view/1064342
JsFiddle demo (Basicly it's Emphram Stavanger's code, I just putted in the changes by nick_W, changed Jquery to latest and I putted after the show link:
http://jsfiddle.net/YVqAW/show/
I not tried yet with horizontal scrolling image website, but it's already a big step!
UPDATE 2:
SOLUTION: https://stackoverflow.com/questions/20303672/horizontal-image-slideshow-javascript-not-working-properly-with-portrait-oriente
(And I need help again...) :)
A little late but you can use a div with background-image and set background-size: contain instead of an img tag:
div.image{
background-image: url("your/url/here");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally.
The background-size property is ie>=9 only though.
I'm new to this site and thought I might give it a shot. I've been having a problem for quite some time now but as my project evolved other problems was solved, but this has remained. And finding the right thing wasn't easy. Im not even sure what the term is for this kind of thing.
Anyway, I want a background image to the right and left of my main page. It need to be z-indexed below the actual page(incase people with low resolutions view the page) so that it doesn't extend over the main page and makes the content unreadable. It needs to go below the actual page if low resolutions are used.
I've been using the following code to do the work for me right now:
<img style="position: absolute; top: 120px; left: 10px; width: 121px; height: 443px; z-index: -1;" src="../admin/images/background_text.png">
Problem is that this isn't working to good with older versions of IE for example and in some cases not at all in others. As you can see it has a set position on my page(left side its higher up on the page) which is also something I want to achieve.
I hope I explained this good enough and cheers to this site. Seems like a great place to find solutions.
Cheers, Martin.
Try this:
<body style="background: url('../admin/images/background_text.png') 120px 10px;" > rest of the page...
this sets the background for the whole page (what it seems kind of like you're doing?) to the given image.
I would also size your image to the desired size if it isn't already, then you don't need to supply width and height (or worry about IE rendering the resize).
if you're really just putting it on the side, I might use a table or div setup and set the background on that (not knowing how your page is setup).
Im not sure if i understand your question or not.
Anyway. Dont set your z-index on the image. I would set position relative on the layers that needed to be at the top.
Remember that IE6 dont get the z-index. It figures out which comes first and then its the last one that is on top, even though it haves a lower z-index.
Here's an improved answer for you:
Give your "wrapper" div the background image as described before. Then extend your main table all the way to the right (or wrap it in another table or div with 100% width) and give that the right side background image. Then the images are still behind all the content and they both should behave as you want them to.
if you need more info on the background css attribute, check out the WDG page