My html has images which have their height and width hardcoded ( is a necessity because of the transition implemented on it). But three images are kept within a div. So is there a way to keep the container div to a specific height and width that makes is responsive to all the screen size and resizes ( if needed) the inner images. Any help will be appreciated.
Generally if you set img { max-width:100% , height:auto; } within a container holder , that will make them responsive in every screen view-port.Because they'r taking the size of it's parent container.
Related
I'm trying to create a responsive web site. For that I found a nice looking template and adjusted it according to my needs.
One thing however came up where I couldn't find a solution so far - and that is resizing of images with different dimensions.
Let's say I have an image with a width of 600px and one with a width of 500px.
My screen size is 700px. I want both images to be shown at their native width (600px & 500px).
Now I reduce my screensize to 550px. I want the 600px image to be resized to 550px. No changes to the 500px image because the native width is still smaller than the screen.
Now I reduce the screensize to 400px. Both images should now also be reduced to 400px accordingly.
I've been googling and reading here for hours but could not find an automatic solution for this.
Best thing I found is is setting <img style="width:100%;max-width:xxx px;" where xxx is the original width of the image. But... I'd have to do this manually for each and every image!
Without max-width the image would always be strechted to 100% of the screen size.
As an alternative I found some JavaScript that calculates the original width of the image and could be used to fill out the max-width value.
If someone disables JavaScript (EG by using NoScript browser adddon) the whole thing wouldn't work.
Since I'm printing out my website using Perl I could do the calculation with Perl as well. That would help against disabled JavaScript. But still...
Are there really no better solutions? Do I really have to calculate the max-width for each and every image?
Here's the current work-in-progress: https://www.digioso.org/html5up-striped
The template features an image fit class that basically sets the width to 100% of the container and then I added the same image using width=100%;max-width=400px .
The image fit makes the image always use 100% of the screen which I don't want.
Thanks a lot!
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
check: How do I auto-resize an image to fit a 'div' container?
If you have something like this in your css:
img {
width: 100%;
}
The image tries to assume its actual size and is automatically adjusted accordingly with the container.
If you need to resize the image when your screen gets smaller, you can use #media and define the relative behaviour.
#media (max-width: 700px) {
img {}
}
I have here svg design, I put it inside a div also this div has navbar and some elements , when the screen is small every thing is okay, but when I increase the screen size the height of svg increases also and be like height:100% although I didn't customize the height and width of the svg, I just customized the viewbox , and it is problem because it comes over the other elements and I can not click or hover the buttons, and when I customize for example the width:100%; and height:400px; for the svg , the path inside it becomes small and not responsive
So what should i do in this case?
I want the width of svg become 100% and the height is 400px or samller, also i want the shape(path) inside it becomes responsive and its width always 100%
Note: I made the border of svg visible to understant how the height becomes when the screen is large
["SIMPLE LANDING PAGE" https://codepen.io/aseelkhanfar19/pen/OJgaNEy][1]
I am designing an HTML5 card game that will run as a mobile app, and need the #table div to scale to fill but not overflow the offsetParent div while maintaining the table's correct aspect ratio of 68%. This means that it should adjust its size to fill but not overflow either parent width and parent height so that it works in both portrait and landscape.
An example is how background-size: contain works when setting the background image. Only I'm not trying to set the background image, I'm trying to set the size of a child div. This way I can use percentage values for all subsequent elements on the table and have the game look exactly the same with exactly the same aspect ratio at all sizes.
Thanks!
UPDATE 1
Here is my code. See how the table is chopped off on the bottom for wide and short screen sizes:
http://vedanamedia.com/clients/intuitive-eye/speakeasy/
UPDATE 2
I am going for something just like this (jsfiddle.net/webtiki/dAebS) or this (dabblet.com/gist/2590942) except it also respects the shrinking height of the container.
You could try removing the default height, and adding padding bottom to create the correct aspect ratio and ensure it remains the same when re-sized.
I'm not completely sure I understand what you mean by 68% as you don't have a code pen setup, but I've added below an example for something which is an aspect ratio of 2:1 to see if this might be a possible fix for you.
div {
padding-bottom: 50%;
height: 0;
}
I am trying to fix the web layout of my web page such that it does not resize or rearrange .
for example , check the page at http://www.boutell.com/newfaq/creating/fixedwidthlayout.html
. On my browser(chrome), when i resize the window along x-axis, the text rearranges to accomodate within viewable area.
On the other hand, http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85).aspx
when i resize the window along x-axis, the text does not rearrange to accomodate itself. I need my web page to NOT rearrange as in the latter case. Not able to isolate the attribute which controls this. I tried position:absolute in the body tag. No luck
You have a fluid layout. All your columns have their width set in percents. So, when the browser size changes, the columns's width changes too. Lets say one of your container has a width of 15%. When the browser window width is 2000px, this container's size will be counted as 15% from 2000px = 300px; on the other device, where width is 1200px, it will be 180px.
The fastest way to fix it to change width to px;
Another way is to set min-width property, - then the container can
act as a fluid, but at some point it won't go smaller. For example:
.columnt {
width: 15%;
min-width: 200px;
}
Hope you get the idea.
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.