Currently pictures are being placed into my website within a div container with a given width and height.
Some pictures are landscape, others are portrait.
Currently I give the images a static width and height using CSS to position it correctly inside it's container.
.winner .winner-image img {
height: 159px;
width: 143px;
}
However more often than note this distorts the picture.
What's the recommended way to display images without distorting them? Best practices?
Without some server side code to actually determine the height and width of the image, the best idea would be to set EITHER the height OR the width, but not both. This will cause the image to be resized proportionally. Which dimension you choose to constrain would depend on your site layout.
To not distort them, the images must be given their native height and width (or a proportional value). Just assign one of the values, and most modern browsers will scale the image proportionally for you.
You can add an external element (span or div) with a fixed size, and have that element not display overflowed content.
To guarantee that your images are re-dimensioned, you can also set a height OR width value for images, matching the wrapping div value (only one value must be assigned, so that images are not distorted.
<style>
.img-wrapper {display:inline-block; height:159px; overflow:hidden; width:153px;}
.img-wrapper img {height:159px;}
</style>
<div class="img-wrapper">
<img src="">
</div>
The best way is to create thumbnail of your image once uploaded to a server. Thumbnail should be 159x143 px, but if you need to show images now you can set for div fixed width with css property "overflow: hidden;" and just set height of your image. do not touch width
If it's important that all images show in the same size, and you don't want to distort them, you have to crop them for the best result. Otherwise, you could wrap the image in a div, set the height and width of the div and hide the overflow, or use the image as the background for the div.
If height and width may be different across images, then go with the solutions already mentioned, i.e. setting either height or width.
Related
I have tried different plugins and tutorials, but the problems is usually that they only adjust to the width of the div and/or that the div has size set in pixels and not responsive. But I want the text to always fill and fit the div and adjust the text based on text length and height/width of view, so that there is as little white spaces as possible. I have set the div to 100% both in height and width to fill the view. Anyone found a way to do this? Is it doable in just CSS, or do I need JS as well? Either a plugin, tutorial some guidance would be helpful.
A common way I've 'scaled' text is by just setting the size based on vh or vw. If your div width is based on view width, then you can guarantee that the text will always look the same across resolutions.
.text{
font-size: 0.1vw;
}
I have a set of images for which I am specifying explicit width and height attributes in the HTML, so that space is reserved for them while the page is loaded (this avoids page "jumps" when images take longer to load).
On the other hand I don't ever want the images to take more space than the available width of the viewport. So if the viewport is too narrow the images should resize. For this I added the following CSS styles:
img.resizable {
max-width: 100%;
height: auto;
}
The problem: As soon as I set height:auto in the CSS, space for the image is not reserved anymore during page loads and I get the page "jumps" effect. If I remove height:auto, then if the image resizes the aspect ratio will not be preserved. Any suggestions on how to approach this?
A non-Javascript solution would be preferred if possible.
I solved this with hints from this blog post that explains how to use CSS to set the aspect ratio of a fluid element.
Basically the solution looks as follows:
<div style="width: [width]px; max-width:100%; position:relative">
<div style="padding-top: [aspect]%"></div>
<img style="position:absolute; top:0" src="...">
</div>
where: [width] = image width, [aspect] = 100 * image width / image height
Basically with this the browser has the following information:
The initial width of the image (set in the outer div via width)
The aspect ratio (set in the inner div via padding-top)
The resizing behaviour (set in the outer div via max-width)
With this I achieve the desired behaviour: No page jumps upon initial load, and automatic resizing (keeping the aspect ratio) for narrow viewports.
I would like to make a banner with a possibility to expand it to the full screen independent on resolution.
<body>
<div class="div_left"></div>
<div class="div_middle_fixed"></div>
<div class="div_right"></div>
</body>
Here is a div with a jpg placed in the center of a screen with fixed size 1000px. And I need to “expand” this banner to full screen using 2 other pics (div with dynamic size). I need one at the beginning of my fixed banner which expands dynamic to the left. And the second one at the end of my fixed banner which expands dynamic to the right.
I need this trick so the graphics of a banner has to match at the adges
How can I do this?
I would recommend using the images as backgrounds to those divs, and so forth use this CSS attribute to keep it contained when the site is scaled:
background-size: contain;
I hope this helps!
you can try to add a background-size with the following parameters
cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
or
contain - Scale the image to the largest size such that both its width and its height can fit inside the content area
and
percentage - Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
http://www.w3schools.com/cssref/css3_pr_background-size.asp
I want to load some photos from a server and display each of them in an own box such that the box is filled and the image centered (not stretched), if it is to big. Can I achieve this for example with CSS without knowing the size of each image? Maybe with max-width or so?
Here is an example of what I want:
You could use the CSS3 background-size property.
Specifically, you would use either background-size:contain or background-size:cover.
From the spec:
Values have the following meanings:
‘contain’
Scale the image, while preserving its intrinsic aspect ratio
(if any), to the largest size such that both its width and its height
can fit inside the background positioning area.
‘cover’
Scale the image, while preserving its intrinsic aspect ratio
(if any), to the smallest size such that both its width and its height
can completely cover the background positioning area.
Source: http://www.w3.org/TR/css3-background/#the-background-size
Which one you used would depend on the aspect ratio of the original images you are using.
Scroll down on this resource to see some examples: http://www.css3.info/preview/background-size/
The quickest thing that you can do is to put the image as a background image that is centered:
style="background: url(images/42.png) 50% 50% no-repeat"
Images smaller than the box will be centered in the box. Images that are larger will experience cropping.
The downside is, there is no scaling.
For scaling, you would have to know the dimensions, employ some math to calculate a scaling amount that will preserve the aspect ratio and use an actual element that is inside a cropping container that uses "overflow: hidden".
Here what you do. If for instance the image is inside a DIV with an ID called "boxer" You'll now create a CSS that will automatically re-size every image that's inside the DIV with the ID "boxer" The CSS will look like this
#boxer img {
Width: 600px
Height: 600px;
}
The above CSS will automatically re-size whatever image you put inside to the specifications in the CSS. This will fit the box with the ID "boxer" precisely if the dimensions corresponds to that of the CSS. You could just do 100% for both the width and the height, that way it fits the box.
If I have an image combined with a style:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
The image resizes to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
This seems to require the enclosing DIV to be set to a particular width and height value. But if you want the enclosing DIV to resize automatically as the browser is dragged smaller or larger, wouldn't this be a problem?
I've clarified my answer to your original question. Go take a look and see if it clears things up. More or less, if you want the image to resize with the window you can't set the DIV to a fixed width and height. The DIV must have a % width and height also.
You'll need to manually specify the width and height properties to get the image to keep its dimensions. This wouldn't be too difficult if you're using server-side coding (PHP/ASP).
Another way to do it would be to use JavaScript to calculate and resize the image dynamically.
No, the image will still be 50% of the div, and if the div is a proportion of the page, that doesn't matter.
Its all proportions: The enclosing div might be 2/3 of the whole window, and the image will wil 1/2 of that. It all gets calculated before its displayed, just a bunch of number crunching. ;D