I use Foundation 6 and have some images in two column groups.
When i resize the browser viewport from 1200px width to 1024px width the big image gets smaller, the width shrinks see pictures below.
Is there a way to permit that?
I would prefer a constant distance between the big image and the small image, to set a fix "B" value (second image) that is independent of the user's viewport.
See full webpage can be seen on https://fadendaten.herokuapp.com/t/categories/clothing
Its because your class .product-teaser-column has fixed width. Change that and it will be responsive again.
.product-teaser-column {
width: 470px;
}
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 was wondering how to keep the size of an element (f.ex a cube) on all devices. And when you resize the browser window the element will keep the same "form", but become smaller. What i mean is so when you resize the browser window horizontally, the element (f.ex cube) will keep the same "form". So it wont be more wide than tall.
I know i got to use percentage and not px on the with and height. But when i do that, the element will of course still be the percentage of the current device or screen. I am very bad at describing, so i'm going to give an example instead: When i made a calculator with HTML and CSS on school it fitted the screen perfectly. But the screen on the school is squared (same width as height). And the screen at home is rectangled (not the same width as height). So the calculator at home is to wide. You understand now? If you didn't please let me know.
Here's a picture of how it looks like on my screen home: Full sized browser window home Resized smaller in width window: Smaller in width browser window at home
And sorry for bad describing.. And english.
I dont know if I get what you mean, but if you do mean "keep aspect ratio" you should try this.
Wrap your element in another container, use padding bottom on the container and make your element occupy all its space.
I do not know how resolutions work. If I set the width of my container elements to 1000px and the user opens the page from a 1300px resolution screen, then the right part of the screen 300px would be left white. I don't want that to happen. One way I know is with CSS Media Query but that way I'd have to write tonnes of lines of code. Also I don't want to do it with jQuery. Can someone explain me how resolutions work and how I can create resolution independent elements on my web page?
Use percentages instead of pixels.
for example
div {
height:60%;
width:40%;
}
Using percentages instead of pixels will make it the right size no matter what screen.
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.
I'm having some issues with fluid images when using a max height. I'm trying to bound the image in a box that is at most 450x450 or any arbitrary box thats not in the same aspect ratio as the image. What's happening is that the width of the image is being restricted to 450px but the height is not and the image is overflowing the wrapper div.
my code is:
<div class="wrapper">
<div class="container">
<img src="http://i.imgur.com/iw4yOa0.jpg"/>
</div>
</div>
see http://jsfiddle.net/5fuZ5/ for full code and css.
I know I could achieve this by using jquery but I need a responsive solution that doesn't require javascript.
OK i've got a similar issue and could find nothing to help. My situation is that i have a single column of images that are fluid (fit their container 100% in width) works fine for landscape images but portrait are huge as its the width being fitted, therefore tall and skinny image (portrait) is having its width fit to container thus making it massively tall.
My solution was to think about the container, if in the instance of a portrait image i set the container to be 50% of the landscape container then when i fit the images width (when portrait) to a smaller container i get them proportional (ish).
So wat you want is 2 containers to use, one for portrait and landscape, the landscape one will be the maximum width you want so 450px. Now make your portrait container half a width so 225px (half of the width) if all your images are the same aspect ratio then they should all match nicely and give you a structured grid - or if single column the portrait images will be more or less as tall as the landscape images are wide.
If you want to see this working (for a short time) I'll leave this link up so you can see how i solved it. The example is an email (please don't moan about poor coding, its not finished) template I'm making, where i have a single column of images (its responsive) both portrait and landscape - use a class on the table that contains the portrait image (class=portrait) but this could easily be a div.
http://www.sink140.com/sf-test/single.html
My main point is to stop thinking about trying to control the height, just control the container, let the image fill it, and by adjusting the width of the container (making it smaller) you naturally reduce the height of the image.
Aspect ratio of the images in general will ensure you can predict the layout as you have a baseline of sorts - portrait images relate to the landscape ones.
Hope this helps or at least give you another idea.