Solved

Image sizing

Posted on 2014-09-10
5
186 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 110

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

688 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