Solved

Image sizing

Posted on 2014-09-10
5
182 Views
Last Modified: 2014-09-10
Please look at http://gvha.biz/davis/wooslider_test.html

Note how the images are "full sized" & fill up the browser window.

I want the images all 960 px wide.

How can I do that?

html, css & js attached.

Thanks
wooslider-test.html
flexslider.css
jquery.flexslider.js
jquery.flexslider-min.js
0
Comment
Question by:Richard Korts
  • 2
  • 2
5 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40315166
To
.flexslider {}

add
max-width:960px;

If you want them static at 960px then use just width instead of max-width
0
 

Author Comment

by:Richard Korts
ID: 40315192
Gary,

I put that is several places (not knowing where you meant). When I put it in the css, no effect. When I put it in the html (attached), all slides are gone.

Nothing there. http://gvha.biz/davis/wooslider_test.html
wooslider-test.html
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40315197
You might think about resizing them in an image editor like Photoshop.  Then you could store the right-sized images on your server and only send the right-sized images.  Would potentially save bandwidth.

In semi-related news, here is a flexible Grumpy Cat.  The image treatment with CSS makes it scale nicely.
http://iconoun.com/demo/grumpycat.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Grumpy Cat</title>
<style>

html{
    background-image:url('http://iconoun.com/demo/images/earth_from_space.jpg');
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    height:100%;
}

img{
    max-width:80%;
    max-height:75%;
    position:absolute;
    bottom:0px;
    left:10%;
}

p,a{
	color:red;
}

a:hover{
	color:gold;
}

</style>
</head>
<body>
<p>
Floating, Scalable Grumpy Cat by <a target="_blank" href="http://anthonydpaul.com">Anthony D Paul</a>
<br><a target="_blank" href="http://iconoun.com/demo/images/earth_from_space.jpg">Background</a> (1920 x 1273px)
<br><a target="_blank" href="http://iconoun.com/demo/images/scale_grumpy_cat.png">Grumpy Cat</a> (900 x 704px)
</p>

<img alt="grumpy cat" src="http://iconoun.com/demo/images/scale_grumpy_cat.png" />

</body>
</html>

Open in new window

HTH, ~Ray
0
 
LVL 58

Expert Comment

by:Gary
ID: 40315199
In the .flexslider {} css class or add your own new class after the flexslider css
.flexslider{
max-width:960px;
}

Open in new window

Remove that js you added.
0
 

Author Closing Comment

by:Richard Korts
ID: 40315298
I was wrong all along, the images WERE 960 wide, I want then smaller, so I resized & it worked.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Javascript Case Expression 7 29
Menu Selected on Chrome for Windows 13 18
Passport Expiry 3 44
How can i  prevent default  Submision? 6 24
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now