Solved

Image sizing

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

867 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