By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
444,077 Members | 1,790 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 444,077 IT Pros & Developers. It's quick & easy.

Large picture makes site too wide.

P: n/a
Hello,

My website is 910 pixels wide. The content area is 552 pixels wide. If
I place a picture in the content area that is wider than 552 pixels my
site becomes wider than 910 pixels. I do not want this.

If the picture is too wide it should be displayed smaller or truncated
at the right side or anything.

Is there a standard solution for this that is reasonable backwards
compatible? I am using tables with a CSS sheet. I prefer the solution
to be in CSS.

I appreciate the help. Usually I try to find things out by myself, but
I do not know where to look for a solution for this one.

Take care,
Louis.
Jul 23 '08 #1
Share this Question
Share on Google+
8 Replies


P: n/a
Louis wrote:
Hello,

My website is 910 pixels wide. The content area is 552 pixels wide.
If I place a picture in the content area that is wider than 552
pixels my site becomes wider than 910 pixels. I do not want this.

If the picture is too wide it should be displayed smaller or
truncated at the right side or anything.
Before we can answer that question, you are going to have to explain why
you don't reduce the size of the image.

If the image is 910 px wide, then it is 910 px wide, and it will display
at that width unless either you resize it or use CSS to reduce its
display size, a method which is not recommended.
Jul 23 '08 #2

P: n/a
Louis wrote:
Hello,

My website is 910 pixels wide. The content area is 552 pixels wide. If
I place a picture in the content area that is wider than 552 pixels my
site becomes wider than 910 pixels. I do not want this.
Then resample the image to make it smaller than 522 pixels, even MS
Paint can do that, although I would advise a better program...

Of curse a URL would be helpful, but ...
>
If the picture is too wide it should be displayed smaller
Well no, not without using JavaScript
or truncated
at the right side
Add "overflow: hidden;" to the stylesheet for the containing block element
or anything.
Or "overflow: scroll;" to produce frame-like scrollbars, yuck!
Is there a standard solution for this that is reasonable backwards
compatible? I am using tables with a CSS sheet. I prefer the solution
to be in CSS.
Yes.
>
I appreciate the help. Usually I try to find things out by myself, but
I do not know where to look for a solution for this one.
Let's see a URL.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jul 23 '08 #3

P: n/a
Louis wrote:
My website is 910 pixels wide.
Bummer.
--
Blinky
Killing all posts from Google Groups
The Usenet Improvement Project: http://improve-usenet.org
Need a new news feed? http://blinkynet.net/comp/newfeed.html

Jul 23 '08 #4

P: n/a
On 7/23/2008 11:01 AM, Louis wrote:
Hello,

My website is 910 pixels wide. The content area is 552 pixels wide. If
I place a picture in the content area that is wider than 552 pixels my
site becomes wider than 910 pixels. I do not want this.

If the picture is too wide it should be displayed smaller or truncated
at the right side or anything.

Is there a standard solution for this that is reasonable backwards
compatible? I am using tables with a CSS sheet. I prefer the solution
to be in CSS.

I appreciate the help. Usually I try to find things out by myself, but
I do not know where to look for a solution for this one.

Take care,
Louis.
The "standard solution" is to avoid assuming that someone else's browser
window is any particular width or that their screen resolution is the
same as yours.

Why do you have a page that is 910 pixels wide? Although my monitor,
drivers, and video card can support a screen resolution of 1280x1024, my
eyes work best with 800x600. Furthermore, I keep a toolbar on the right
side of my screen, which means that a maximized browser window is still
less than the full width of my screen. 910 pixels might prevent viewing
with some portable devices (e.g., cell phones). It certainly will
require very annoying horizontal scrolling for those who do not maximize
their browser window.

--

David E. Ross
<http://www.rossde.com/>.

Q: What's a President Bush cocktail?
A: Business on the rocks.
Jul 23 '08 #5

P: n/a
In article <ge********************************@4ax.com>,
Louis <no*****@provider.dflwrote:
If the picture is too wide it should be displayed smaller ...

...I prefer the solution to be in CSS.
This works nicely on all my browsers on my platform but it is unlikely
to look well with all kinds of pics on all kinds of browsers and
platforms. Judge for yourself:

<http://dorayme.890m.com/alt/fitToDiv.html>

--
dorayme
Jul 24 '08 #6

P: n/a
On 23 Čec, 20:01, Louis <nore...@provider.dflwrote:
Hello,

My website is 910 pixels wide. The content area is 552 pixels wide. If
I place a picture in the content area that is wider than 552 pixels my
site becomes wider than 910 pixels. I do not want this.

If the picture is too wide it should be displayed smaller or truncated
at the right side or anything.
Hi Louis, try this
<div style="width:552px; overflow-x:hidden"><img src="picture.jpg"></
div>

Petr Vileta, Czech Republic

Jul 24 '08 #7

P: n/a
On 2008-07-24, fidokomik <go****@practisoft.czwrote:
On 23 Čec, 20:01, Louis <nore...@provider.dflwrote:
>Hello,

My website is 910 pixels wide. The content area is 552 pixels wide. If
I place a picture in the content area that is wider than 552 pixels my
site becomes wider than 910 pixels. I do not want this.

If the picture is too wide it should be displayed smaller or truncated
at the right side or anything.

Hi Louis, try this
<div style="width:552px; overflow-x:hidden"><img src="picture.jpg"></
div>
Overflow-x is CSS 3. Stick to CSS 2.1's overflow: hidden for now.
Jul 24 '08 #8

P: n/a
..oO(Ben C)
>Overflow-x is CSS 3. Stick to CSS 2.1's overflow: hidden for now.
Should work well enough. IE supports it as a proprietary extension and
modern browsers like Opera and FF support it because of CSS 3.

Micha
Jul 24 '08 #9

This discussion thread is closed

Replies have been disabled for this discussion.