I have a slight problem in trying to make my website responsive as well as laying out images nicely with packery.
<div id="content"> // <- width of this determined through javascript
<div class="imagecontainer">
<img src="picture" width=500 height=700>
</div>
</div>
css:
.imagecontainer{
max-width:100%;
}
img{
width:100%;
}
I've set the max-width at 100% for my imagecontainers so that they're never larger than the main content div. With the above code, however, the images inside get squashed horizontally as the img's width, but not height is overruled by the imagecontainer's max-width. The simple solution to this problem is of course to remove the height value from the img, but I've just painstakingly ADDED it so that packery won't make a mockery of my layout when it's loading by placing posts on top of each other. Adding height:auto to the img css also ruins the layout (when it's loading, just to be clear).
The best solution I've come up with is to remove the height attribute from the image once it's loaded, but I was wondering if there's maybe an easier css-only solution, or a smarter way of doing it with js?
Related
I have the following img tag, which sits inside a container with 30 pixels of horizontal padding. It is therefore designed to show a 640-pixel wide image if the screen is >=670 pixels wide, and otherwise a 320-pixel wide image:
<img srcset="TestImage320.png 320w, TestImage640.png 640w"
sizes="(max-width: 669px) 320px, 640px"
src="TestImage320.png">
However, the 640-pixel image is simply a manually scaled-up version of the 320-pixel image. Is it possible to achieve the same effect without creating (and requiring users to download) the 640-pixel image?
Essentially, my current approach chooses between src="TestImage320.png" and src="TestImage640.png" values depending on the available width. Instead, I want to keep src="TestImage320.png" and choose between style="width: 320px" and style="width: 640px". How can I achieve this (or something equivalent)?
If you try to scale up an image, it will look bad. You can scale down better and still keep some nice quality.
I would only include the 640px version. Throw a max-width: 640px; width: 100%; and watch it scale down perfectly.
Unless you are significantly worried about load time it is often best to use the largest image you need (in your case 640px) and then scale it down to 320px. Keep in mind with the prevalence of retina displays it is recommended that you double the resolution of your image so it still looks nice on those displays. But again it's a load time vs image quality question, though an image at 1280px shouldn't be a super huge file.
Use this style on your image it will scale and keep integrity according to width.
.imageClass{
width:100%
height:auto;
float:left;
}
If you need it to remain a certain height this will keep integrity according to height.
.imageClass{
width:auto;
height:100%;
float:left;
}
File HTML:
<div class="text-img">
<img src="text.jpg" alt="text" title="text" />
</div>
File CSS:
.text-img {width:100%;max-width:640px;overflow:hidden;}
.text-img img {min-height:100%;}
I posted a this question last night, but have completely rewritten it because I think it was confusing people, and I also have provided an example to illustrate my problem....
I have a slideshow that I would like to fill a div completely. Right now, if someone visits my site from a narrow browser viewport, the slideshow will only fill the width but not the entire height, therefore leaving space at the bottom of the div.
I would like the slideshow to proportionally scale to fit and cover the entire div, even if cropping from the sides is necessary. Does this make sense what I am asking?
Here's the example: If you visit it right now from a wide or full screen browser window, the images probably fill the entire div. But if you narrow your window and refresh, you will see the bg color at the bottom of the div. Example: http://mudchallenger.com/a-responsivef.html
How can I get this slideshow to fill the div?
Thank you!!
**I should also add, I'm NOT trying to make this fill the screen as a background. I just want it to fill the div.
You need to set the height of the image to 100% and let the width be automatic. This is because the images are of landscape orientation. Then, make sure you have the overflow (maybe just overflow-x) attribute of div.slideshow set to hidden. This will allow the image to scale to the div (the frame) rather than to itself. Here is an example: http://jsfiddle.net/krh121791/rXep9/.
HTML
<div class="slideshow" style="position: relative;">
<img src="http://mudchallenger.com/a-images/backgrounds/bg-1.png" />
</div>
CSS
.slideshow{
height:100%;
width:600px;
overflow:hidden;
}
.slideshow img{
height:100%;
}
A note, you would set the width to 100% and overflow-y to hidden if you have a portrait picture.
I am soo bad at css. I have a div in which multiple images can be put. this div is a slide.
<div id="slides">
<img src="imagename.jpg"/>
</div>
some images are e.g. 100x300 but some are 300x100. how can I scale those images according to their own dimensions so that they show up as in original form?
my live example with this bug is in here:
http://wohne-wo-du-willst.de/angebot/Wohnung/ist-frei-in-Dachau/22/
as you slide, the 3rd slide image doesnot show up in its full form..
A big problem you have here is that your images aren't 100x300px or 300x100px, they're instead 1920x2560px or 2560x1920px - much, much larger. They're also all around 1MB in size, which in reality is far too large for images like this. Before doing anything you should resize these images yourself to make them their desired size and ultimately reduce their file size as well.
After that, simply remove the max-width and max-height properties from your #slides img selector, then modify width and height to:
#slides img {
...
height: initial;
width: initial !important;
}
The initial value sets the image size to its initial size; that means if your image is 100x300, that is also its initial size. Using this with the images you currently have will set them to 1920x2560 or 2560x1920.
I've unfortunately had to use !important here as the slide plugin will try to force your images to 100% width.
<style>
img
{
height:100%;
width:100%;
}
</style>
<div id="slides">
<img src="imagename.jpg"/>
</div>
I have a centred fixed width content div, and if there isnt enough content (ie, an small error page) the height of it is smaller than the height of my web-browser.
This leaves the footer in the middle of the screen, the and the background of the content div not continued to the bottom. Just looking like shit.
Is there a way to force the content div to always fill the screen, if it's contents are smaller than the current screen?
I realize this might have to use javascript, but I'm not very acquainted with it.
edit: If the user re-sizes the window, I'll want it to update as-well.
edit: It looks like I can use the window.innerWidth, window.innerHeight properties
Sounds like what you want is a sticky footer, not a resize of the body.
Check out Ryan Fait's great tutorial on how to do this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Here's a demo of it in action: http://ryanfait.com/sticky-footer/
Check out Ryan Fait's Sticky Footer. It sounds like what you need, and is implemented in CSS. I've used a variation for several projects and it Just Works.
Use can use this,
<style>
html,body{
height:100%;
margin:0;
}
#wrapper {
min-height:80%;
}
</style>
<div id='wrapper'>
hello
</div>
<div id='footer'>
my footer
</div>
I have a bunch of images that are guaranteed to have:
minimum width = 200px
maximum width = 250px
minimum height = 150px
maximum height = 175px
What I want to do is display a consist 200px by 150px rectangle of the image while maintaining scale (no stretching or shrinking).
Which means, I might have some overflow.
How can I display the image so that it keeps porpotions to the original image size, yet displayed inside a 200x150 px window and hiding any overflow?
Wrap them in a container with the dimensions you want and overflow: hidden.
This trick is quite cool and doesnt matter the image size ok look... you can do something like this
<div style="width:Npx; height:Npx; overflow:hidden">
<img src="source.png" style="width:Npx;">
</div>
so how this work, the div will hold the imagen in a rectangle Xpx by Ypx you defined and will "crop" everything that its outside. Then you use the resize who have every browser you can assign a With a imagen and the browser will resize it for you. So if you put the same width that the div holder you will give the impresion that the image fit in that rectangle. This is the best option I can find without use server side code.
the next example is:
you can define again a rectangle and then assign a background, the big problem is the the imagen WILL not resize to fit the area.
<div style="width:Npx; height:Npx; background:url(yourimage.png) center"></div>
hope to help you... best
I made a quick demo (online here) of a way of solving it similar to nahum's second example. There are 3 images within the range of sizes you set. It doesn't resize or stretch the images and they will follow the alignment of the surrounding text.
Hope it helps,
Jedidiah
<span class="thumbnail" style="background-image:url(200_150.jpg);"></span>
<span class="thumbnail" style="background-image:url(220_160.jpg);"></span>
<span class="thumbnail" style="background-image:url(250_175.jpg);"></span>
span.thumbnail{
display:block; display:inline-block;
width:200px; height:150px;
background-position: center center;
background-repeat: no-repeat;
}
Use a span rather than a div because IE6+7 will only let you set display:inline-block on an element that is naturally inline.
The first display:block is a fallback for Firefox 2 which doesn't support inline-block.
If you're images are particularly large, or there are going to be lots of them (for example, a thumbnail browser). You may want to consider creating a pre-cropped copy of them image. This can be done using gd or imagemagick [0] - you can also find a number of wrapper libraries around these extensions that may make the task easier.
[0] http://php.net/manual/en/refs.utilspec.image.php
In theory, this is exactly what the clip property of CSS is for - but there's one, sometimes really painful, side effect to using it, though - the image needs to be absolutely positioned:
<html>
<head>
<style type="text/css">
.thumbnail {
width:200px;
height:150px;
}
.thumbnail img {
position:absolute;
clip:rect(0, 200px, 150px, 0);
}
</style>
</head>
<body>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
</body>
</html>
The fact that this takes the images out of document flow is pretty nasty - the best you can do is put them inside a frame of the right dimensions (which means you may as well just use the overflow mask methods other people have suggested). Clip is a useful property in the right places, and a lot of people don't seem to know about it.
Just set a min-height:whatever and max-height:whatever and overflow:hidden on the blocks, then just place the images in the block, and that's it.