Solved

Image sizing

Posted on 2014-09-10
5
178 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 108

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

758 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

20 Experts available now in Live!

Get 1:1 Help Now