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.
Related
I was learning how to create a table to display searchable data in a list using HTML. I have it split into two columns and want the elements to scale to the screen size. If possible, I wanted to have the width of the element divide the webpage's width in half and have their height scale to the width making the element into a square. What I currently have scaled the width, but my fix overlaps the two columns and creates a few other issues. I also could not figure out how to have the ratio of the height: width is 1:1. Here is the modified w3school code I am working with:
https://www.w3schools.com/code/tryit.asp?filename=FZRZ717W4LB3.
Here is my solution with a bit more trying if anyone else has a similar desire for this layout: https://www.w3schools.com/code/tryit.asp?filename=FZS3SPUN6GOH.
I want to use the flexbox and the responsive image (the image with scrset and sizes). But the result seems horrible. The images have different height even if I used flex-grow to pull aligned, because the browser will load the different image with different sizes. I want the height of all images to be the same.
I found out sizes of images is hard to set if I use flexbox, it's quit unpredictable. Is there any way to solve this?
Here is the JSfiddle (Please resize the result window larger and the I used inline css for flex-grow)
Set the image height property to:
height:100%;
And if you want your all images to be the same size set the same value for flex-grow.
flex-grow:1;
We are developing a responsive site where we allow a user to upload images.
We preserve the original and then generate a thumbnail image to be served to users with lower resolutions.
The issue that has been raised is that when the image is switched in the logic for the smaller screen size there is a visible re-flow of the elements around it.
I am unsure how to prevent this as the images are of inconsistent height so cannot set an initial height on the containing element.
Any ideas would be appreciated.
I looked at this:
http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/
But it seems to be only for scenarios where we know the ratio i.e. 16:9, 4:3 etc
I assume your thumbnails have a fixed maximum size.
You can put your image inside a box with the maximum height/width set so the orientations (landscape, portrait, square) doesn't matter. This would give you fixed whitespace around your image.
You can also generate this whitespace in the thumbnail giving you a fixed width/height in all your images.
I would like to resize an image on my website. I know how to do it by either resizing the image before or calculating the width and height and setting the values in pixels. But I use the same picture multiple times with different dimmensions, so it would take me less time if I could resize the image relatively to its own size.
<img src='images/logo-beta.png' id="logo" height="75%" width="75%"/>
I have tried this, however the problem is that the size is set relative to its parent element.
There's no way to do what you want automatically using HTML or CSS alone. You'll need to use JavaScript to get the image's dimensions, then calculate a percentage of those dimensions and reapply them to the image in pixels
There is a method, but it isn't perfect. It requires a wrapping element whose display is set to 'inline-block' and the image is resized using 'max-width'.
The issue is that the parent element retains the image's original width, which could cause problems depending on your requirements.
Example: http://jsfiddle.net/amustill/GnEw5/
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.