I'm using tumblr. I've inserted an image, html looks like:
<img height="320" src="foo.png" width="400" />
My image really is that exact size, width(400), height(320). It has text in it, and looks crisp if I visit the url of the image directly (or locally on my machine).
In the tumblr post however, the image is quite blurry. It is indeed 400 pixels wide in screen pixels, but looks like there's some weird compression being applied possibly through some css attribute on the tag that I'm not aware of?
Anything I can check to see what's going on?
Thanks
I am not exactly sure whats the problem but you can try putting the img inside a div and fix the size of div using style instead of img. something like
<div style="height:320px;width:400px;">
<img src="foo.png" />
</div>
try giving the image a height with css for example
<img style="width: 400px; height: 320px;" src="foo.png" />
or dont even use an img tag use a div for example
<div style="background: url(foo.png); width: 400px; height: 320px;"></div>
Related
I'm currently working on my portfolio and I'm at the stage of adding images from my computer. However, when I upload an image it only looks clear if I don't change the width/height in my html. Whereas when I do change the width/height it becomes stretched and unclear.
This is an example of the image that has had its width/height changed -
Here is the image when I dont change the width/height -
The current image i'm using is a jpeg and the dimensions are 1920 × 1044
I'm resizing the image using this method -
<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="width:250px;height:300px;" />
Take a look at my codepen to see more. I'm using placeholder images here for the time being. Ideally I would like my own photos to be as clear as the photos on my codepen. -http://codepen.io/jordan_miguel/pen/gLwJRb?editors=1100
Your resizing is not proportionate. If you do something like style="width:50%;", the the image will display proportionally but at the specified size percentage.
You need to resize it and also keep the aspect ratio of the original image to avoid stretching it.
For example:
<img class="fade aspect" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image" />
CSS:
.aspect{
height: 300px; //However tall you want it to be
width: auto; //Don't specify the pixels
}
This will also work:
.aspect{
height: 300px; //However tall you want it to be
width: 100%; //Don't specify the pixels
}
<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="width:250px;" />
auto correct height to the width
`<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="height:300px;" />`
auto correct width to the height
I've got a markdown with HTML built inside and I need to change the following:
<img src="..." />
Into
<img class="image" /> // Could also be a div, doesn't matter
And give it a background-image CSS style instead (this is due to webpack bundling and the fact I have no imports and variables in .md files)
Problem is that the first option loads the image properly without having to specify height/width, and the 2nd approach shows nothing unless I specify height/width.
Fiddle demonstrating issue
Why is this, and is there a way to bypass this without specifying height/width for every such occurence?
The best you can do is calculate the proportion of the img and then use the value for padding and cover to fit that:
As an example if the image is 1:1 proportion:
.image {
background-image: url('http://i.imgur.com/3Zh2iqf.jpg');
background-repeat: no-repeat;
background-size:cover;
padding-top:100%;
}
<div>
<div class="image">
</div>
</div>
I'm working on a school project and I'm wondering if this is possible:
In one div, I've defined an <img>, which will display.
In the second div, I want the img src to come from the first div.
Is it possible to do this? Preferably without anything besides css/html.
If you don't mind a little JS you can do it inline in your HTML. E.g.
<img id="img1" src="http://cdn.obsidianportal.com/assets/50953/serenity19dc.png" />
<img id="img2" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="this.src=document.getElementById('img1').src" />
Here the second image has intially just a placeholder image (1x1 gif) but on load it is replaced by SRC from the first image.
You need JavaScript to copy the src attribute, but you can have two images while defining the URL in one place by defining a background image in CSS:
.is-image {
background: url('http://www.google.com/images/srpr/logo11w.png') no-repeat;
width: 538px;
height: 190px;
}
<div class="is-image"></div>
<div class="is-image"></div>
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
I want to create a basic layout for webpage with divs and want to set images for their background.
Since I have smaller images I want to stretch them to fill in the divs.
There are many ways to do that. But I tried following:
</html>
<head>
<style>
img#bg {
top:0;
left:0;
width:100%;
height:100%;
}
<style>
<head>
<body>
<img src="body.jpg" alt="background image" id="bg" />
<div id="content"> </div>
<body>
</html>
This worked. Then I tried to make use of it in layout.
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
This also worked. But when I tried to set image this way for a div with float:left or CSS width set, it did not worked:
<div id="header" style="zindex=1;height:300px;width:100%"></div>
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" style="float:right" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
This doesnt work. In last HTML notice float:right.
I will like to stick to this method, not any jQuery method or others and also will like to know what is wrong here and what should be done to get the desired result with CSS modifications as I am learning this.
Seems like you want a background image
A good explanation can be found here
Basically you can make a div have a background using CSS and not having to put an tag inside, this is almost always preferable.
Example code for you could be:
body {
background-image: url('body.jpg');
background-size: cover;
}
In order for height: 100%, Top:0 etc to work you need to have a position applied to the element.
You don't as per the example code given. Give more code and i can help more. But from what you have given this is your problem.
background-size: cover;
Is a nice solution, but I'm not sure about the browser support, because it's CSS3.
I made a fiddle, is this what you were looking for?
http://jsfiddle.net/NQY6B/5/
By the way, change "zindex" to "z-index".
EDIT: I've updated the fiddle with text content in the div