I want to have a page with 3 (for example) images, placed horizontally and all having same width (though the actual image sizes may differ). They can change the image height according to the image ratio, no restriction on that.
So I am using a table with width = 100% [table width="100%"]. Inside that table, there is one row with three columns (td), each 33% [td style="width:33%;"]. Each table description has one image, width of which I have specified as [img src="{{MEDIA_URL}}a.jpg" 80% style="width:80%;"] to ensure that each image occupy 80% of the 1/3 of the screen width.
It is working fine with Mozilla, but in Chrome, when hitting refresh, images are becoming very very small, but while hitting enter over the browser url, it's working fine. Basically it's not taking the table width as 100%, which I can figure out by using border attribute.
Any suggestion?
Have you thought about using css to style the images instead of html?
Using the float property to align divs horizontally is fairly easy, and then you an apply percentages to each div and image, meaning it will re-size when ever the window size changes.
Related
I have images inside an html article that is set to columns using a fixed column-width attribute on containing div.
I've added srcset for reponsive images which works fine except it loads the largest image based on the width of the containing div not a smaller image based on the width of the columns.
In some cases the article is displayed without columns so I was hoping the same image srcset can cater for both situations. Is there any way to make srcset select the smaller sized image when its showing the content in fixed with columns?
For lack of responses, I came up with wrapping div around the images so the div scales to the column and srcset picks image is selected based on the wrapper rather than the full div. If anyone has a better solution please share.
Update: Doesn't work as srcset looks at the viewport not the wrapping div. One way to solve this might be to just use 30vw in sizes if its in multicolumn or calculate the number of columns using the width of containing div and use that value as the vw amount in sizes.
I want to overlay a form with fields on to an image. Essentially I have created a picture that resembles and artist's desk. I have uploaded the image here:
(source: saeedalkhirbash.com)
I want the "Personal Details" section to be on top of one part of the image (post-its on a desk) and the remaining "Information section" on top of the graph paper on the desk. I have all the fonts etc already.
I have tried two methods:
method1: Coding my image as a background-image. This is easy to get form elements on top. The problem is that I cannot work out how to make the image do both of the following:
retain its proportions, with the width equal to the device width (and height scaled to retain the image's proportions);
and always show the full height and width.
I have tried adjusting the background size in %s, auto, and using cover, contain - no combination seems to work.
method2: I can make my image fit nicely with very simple code:
<img src="*.png" style="width:device-width">
and this works great. Unfortunately I cannot work out how to overlay the form elements. I have tried using z-index:1 as below, but this achieves nothing... (I have tried for both the form and fieldset attributes.
<form style="z-index:1"><fieldset> input blah blah </fieldset><form>
How can i do this ?
using a background image will be the easiest way to go. I think you will have issues with scale when viewing on a mobile device depending on how many fields you are planning on using and where.
By setting the form position to relative, and then any fieldsets to absolute, will allow you to posistion them accurately.
Your css for the background, so that it scales correctly, would look something like:
background: url('http://www.saeedalkhirbash.com/backgroundfinally.png') top left / 100% 100% no-repeat;
By setting the width of your form to be relative to its container, it will resize as the screen size changes. Using media queries is an easy way to resize based on device/screen width.
#media only screen and (max-width : 480px) {
div{width:300px;height:300px;}
}
Here is an example code pen for you - http://codepen.io/lukeocom/pen/bfeGC/
Resize the window so that it is less than 480px wide and see what happens...
For a version of the above demo that uses a relative width - http://codepen.io/lukeocom/pen/jBxzI/
Hope this helps
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.
I think similar questions have been answered, but none really seem to have helped me out that much.
I have a table that is set to width="100%" with a cell on the top row.
This cell contains an image which is fairly wide.
When I resize the window, and therefore the table, the image does not resize below 100% of its original size.
Is there a way to get this image to reduce in size as the table shrinks?
Set image width to 100% as well.
If this doesn't help set it to auto!
#img{width:100%;}
or
#img{width:auto;}
If you want it to actually get smaller than the specified width/height (or the original width/height) of the image, you need to do some scripting. This means you can hook up the resize event of the browser and reset the width/height of the image equally while resizing.
Another option is to wrap the image in a div with an overflow:hidden specified. So if the div gets to large for the window, it will hide the pieces of the image that fall outside the window.
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