With JavaScript, the element is assigned to var a. If I simply assign its style background to an image (most images) as such: a.style = 'background:url(image.jpg)';, the image's width and length will adjust perfectly to fit that of the div element's by default.
One particular issue though: I've snapped a quick pic with my phone (.jpg) and downloaded it on my pc and assigned its url value to the div element's background. It however does not adjust its width and height to that of the div element's.
Why is this? and how do I correct this issue?
Thanks in advance.
To control the size of the background-image, you can use the background-size property.
To ensure the image stays within the constraints of the div, you would use "contain"
background-size: contain;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Related
On Apple.com, their homepage, underneath the slides, you see 4 clickable posts/images and when you scale the browser window(or use a phone or tablet), they scale according.
Is their a plugin for Wordpress that mimics this type of behavior or HTML code?
Where you can have 4 images to scale to the UI, simple HTML code?
I know there are plugins that do this with latest posts but its not what I want. Thank you in advance.
Example image
They are using the background-size attribute. What that does is ensure the image is contained within the parent element and scaled up or down to ensure that it's at 100% width and height but still within the parent container.
It accepts a couple of properties. Here is the table of browser support.
background-size: contain;
Contains the image within the parent element and does not overflow.
background-size: cover;
Ensures the background image covers the full width and height of the element it is applied to. It won't skew the aspect ratio, it will simply overflow the element to the right size to maintain the aspect ratio.
Also, just to note, you can use pixels and media queries to explicitly set the image width/height ratio. This would look like this and goes in the order of width then height and if you use one value instead of two, that will also work.
background-size: 250px 150px;
Note that the background image is contained to the element it is applied to regardless. So even though it technically overflows when using cover, it doesn't visually spill over the element so it doesn't look messy.
I'm currently working of the mobile version of a website and I want all images to fill 90% of the screen width. I think the best technique to achieve this is creating a div for every image which is using the image as background-image. The problem is that I don't know how to match the height of the div with the aspect ratio of the image. I have tried to set width: 90% and height: auto but it didn't worked.
Could you please help me?
Lennart
You have an option in CSS called background-size with the option cover:
background-size: cover;
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom. The image is automatically centered unless over-ridden by another property such as background-position.
I don't know if I might be getting the question wrong, but I don't understand why you want to use background images?
If you use a regular img-Tag, the image will keep its aspect ratio if you set it to
width: 90%
height: auto
Other than that you can keep the aspect ratio of a div-container by setting a padding-top to a percentage on a wrapper-div. That works because the percentage is calculated dependend on the width of the div. See more here: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
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.
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.
I want to have a div with a background image specified in CSS, and I want the background image to appear at a certain offset. I already know how to do that part. I also want to be able to set an arbitrary size for the div, and for the image to be rescaled accordingly. That's the part I'm having trouble with. I know about the background-size CSS attribute, but that doesn't give me any way to have independent control over the X and Y axes.
Is this even possible? I only need to support recent versions of WebKit.
My mistake - the document that I linked to seems to be outdated. background-size does, in fact, allow for specifying the height and width independently, like this:
background-size: 400px 200px;