I am using WooSlider to display a gallery for each project of mine. Many of my projects are in HD aspect ratio (1280x720) while other older ones are SD (720x540).
The problem I am having is that I would like to make my site width 1280px wide but since WooSlider sets it's size according to the website width, the SD images would be enormous in vertical height (around 960px). The HD images look fine since they remain at 1280x720px.
Since I cannot restrict the width of the slider as 1280 works great for HD images, I thought perhaps it's possible to restrict the height of the slider so that it will crop the gigantic SD images. Cropping would be ok so long as the SD images stay centered within the crop. But I would need the slider to remain responsive so a fixed height won't do.
So is this possible? To restrict the maximum height of WooSlider, while still allowing it to be responsive?
Alternately, if I could check the width of the slider images, I could possibly restrict the height only when images are in SD format, while leaving the HD ones unaffected.
Here is an example of my website at 1024px wide, displaying SD images. As you can see, even at 1024px, the vertical height of the scaled SD images in the slider is very large so at 1280px it would be enormous:
http://richardrosenman.com/portfolio-items/kraft-dinner-pimp-my-ride/
Any suggestions or info welcome.
What does it have to do with php? For me you should just add max-height attribute to wooslider class in CSS.
Related
The image in the bottom of the parallax theme appears to be too small. If you expand your browser to full height you will see that it is showing spacing on the bottom.
My first guess is that the image is too small. However the height is actually larger than the one I'm using on the top widget area. Should I get a larger picture or is there something I can do with css?
URL: jeff-cunningham.com
It is using the width to scale the height. So to get the height you desire, you need to make sure the proportions of the image are enough to go down far enough.
As an easy example lets say your page is 1000pxs wide. You need the image to go down 2000pxs. You would then need your height to be 2 times bigger than your width. A picture with a width of 1500pxs and a height of 2000pxs would not work because the image would scale to a width of 1000pxs and a height of 1333pxs.
On my website I have a slider of images across the top. This is the demo of the drupal theme (the company, not my website),
http://demo.drupalizing.com/?theme=bluemasters
All my pictures are different sizes or different kinds of shots. I don't know how to say it. I can re-size in any program. If I keep the aspect ratio, the 960px will be fine, but the bottom will be stretched.
How do I keep it all good and fit it in 960?
If not 960, what is a good number or other type of design?
Can I use CSS? Do I use an image program like Gimp, Paint.net, etc.?
As long as all your pictures are larger than 960px in width you can use HTML or CSS markup to resize the image to 960px. However, please remember that there is no way to display the an entire image say 4000x2000 in a 960px box without making it look small or choppy. In this case I would use an image editing program and cut out the main focus of the image and save it as a 960x300 (or whatever height) image.
From your link, the slider images are all 930px x 320px. You can use CSS to overcome this limitation, but your images might stretch out of proportion.
I would start with a an art work that is 930px x 320px, and just crop your photos according to this aspect ratio.
In this BlueMaster theme, the CSS already has a width set to 100% so no need to worry about scaling.
Online photo editor tool: http://pixlr.com/editor/
File -> New Image
Width -> 930
Height -> 320
I have an image of that has a height of 480px. On my Macbook it looks OK but when I go to my 30 inch monitor obviously there is a huge space in the bottom.
What can I do to make sure that the 480px will always be in relation so the size of the user's screen?
I did some searches and it seems that using background-image: cover or background position I can do some stuff but highly likely it's not what I am looking for. What can I do tackle this issue?
One way to achieve this is to place the image in a container that can scale with the page.
Height is a hard attribute to scale, but you can achieve it as long as all of the parent elements have a specified height as well.
You can use CSS code such as
height:40%;
to scale elements.
Scale the page's height here to see for yourself: http://jsfiddle.net/L7uWd/
Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
Set the image height to some percentage instead of pixel, that will automatically handle with the size of the screen.
I'm making a responsive blog for both mobile and desktop users (all in one). With respect to image resizing, I understand that I can use width:100%; height:100%; so that they scale proportionally depending on the page size, but I've noticed that smaller images upscale to fit the width of the DIV that it is in. Let's say my DIV has a max-width of 640px but an image I include within it in 500px.
What CSS can I use to keep the image at 500px and then scale down proportionally if the resolution width falls below 500px?
The reason I'm asking this is because not all images in posts may be 640px wide.
Set your image max-width property to the actual image size.
Why don't you just set max-width:100% and leave width off.
A client wants to have an image that takes up entire screen, on mouse over the menu would appear. The problem is the height vertical alignment for various screen sizes....What would be the most common sleek looking solution to this issue? Let's assume that the most common screen resolution for the site's audience is 1024x768 but it should look good on smaller resolutions too (specifically for laptops).
My initial idea was to use an image such as 1000x600 and black background...any other ideas?
Thanks!
Compare the aspect ratio of the screen with the aspect ratio of the image, then scale the image appropriately. For example, if the aspect ratio (width / height) of the screen is larger than the aspect ratio of the image, then it's too wide - so scale the width of the image but keep the height the same size as the viewport. Visa versa for if it's smaller. I think you can use PHP to achieve what you want.