Jump to content

images are shrinked horizontaly down to 720px


genpix

Recommended Posts

I created an internal Document with text and few inserted images, most of them are 800px x 684px PNG files.

Surely, images look fine in the Document section (Content tab). But when I open that document inside my store, all images are shrieked horizontally down to 720px.

And when I check the image info, I see something like that (snapshot attached). I'm not a CSS guru, but my guts are telling me that this behavior is set in one of the CSS files.

How can I correct that?

 

Capture.PNG

Link to comment
Share on other sites

When the browser gives media info for images as seen at the time the image info details box is requested, and states that the image is scaled, this is to say that the browser has no fixed dimensions, either in the <img> tag or in CSS, and is relying on the limits imposed by the image's container (table cell, div, etc).

The image is probably getting scaled to fit 100% (that is, as wide as) of it's parent container. So, for the storefront, the image's container is probably close to 720px wide - and that depends on how much space that it's parent container gives it. For the admin text editor, that width has no relation or knowledge of the storefront width, and so could very well be shown full size.

You can force the size, of course, but that may result in an overflow.

Link to comment
Share on other sites

The Foundation skin's width is based on the width of the root font. There is no specific font size specified in any of the CSS files, so the browser uses the font size the browser user has set in the browser's settings screen. (For the browser I use, that would be 16px.) For the large size of the layout, the minimum (before switching to the medium layout) is 64em and the maximum width is 90em that is spanning the browser window edge-to-edge. Foundation as shipped with CubeCart has no CSS rules for anything larger than 90em. Thus, a browser window larger than 90em will simply grow empty space on either side of the actual content. Some more CSS can be added, of course.

The em designation tells the browser to figure out the width of the current font's letter M at the stated pixel size. (For my browser, 90em is 970 pixels wide. Of that, 720 pixels is given to the main content area.)

For your browser, you can change the font size in your browser's settings. That will make the display bigger or smaller depending. But you cannot control what others do with their browser. Consider what you want your visitors to see on their smart phones. Your image is going to get scaled no matter what you try to do. (Unless you force the image to have a given size. but then you've broke the storefront layout for mobile devices.)

 

Link to comment
Share on other sites

thanks for detailed reply.

for now, I overwrote the behavior by adding <div> directive somewhere in the middle of the text (at new paragraph):

added <div style="width: 800px;"> line. Now it looks better on the PC, and has no overlapping with the "featured product" box  (but probably it is broken on the mobile device).

But for the future documents, I'll try to understand em settings in the CSS files and make graceful changes.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...