Square (keeping proportions)

Hello. Sorry to post again, but since i found no answer on the now read only forum…
I'm wondering if there's a way to make a square in responsive directly from edge.
The design of the page is one big sidebar on the right (1/3 of the page), inside are 2 squares (10px margins around).
Is there an easy way to make this happen in Edge ?
I have no problem with the bottom square being cut in the process while displaying the page.
Of course, everything would look nice on 4:3 horizontal iPad screen (next step is to include Chris Gannon's orientation process)

Nope
These are responsive rectangles. They started as squares due to my window, but they turn as disproportionnated rectangles when you move the window.
Think of this more like this except i need a 10px margin between the 2 squares. And here it sort of works because they are images and i can set their height to auto.

Similar Messages

  • How to resize images but keeping proportion

    I have a lot of images at either square (500px), 500px width,
    or 500px height. What I am trying to do is to fit them into a 200
    by 200 area.
    Now, the problem is that I am getting the images (their
    location rather) from a php database that I created. Which is fine,
    except because I set a repeat area (so that I don't have to put in
    every picture manually) on the css, and it seems to require a
    predetermine width or height to be either auto or a certain size
    (in my case, 200px),
    And that's the messy part. Those images with... say...
    500x146 will be out of proportion. (since the 500 will be shrunk to
    200 while 146 will be expanded) Square is perfectly fine because
    they are getting reduced by the same increment. But the rectangles
    are really giving me problems. (Defining either width or height to
    be 500 and leaving out the other to be auto is not an option
    either, consider I have images that are 500x321 or 321x500)
    Well, the obvious solution is to resize everything to the 200
    px proportion. Yet, that presents 2 problems;
    1) I want to let dreamweaver do the resizing so that I can
    still show the 500px images when open in new window.
    2) I can't seem to find an automated way to create a square
    image in photoshop then copy the 500px images onto it, resize,
    save, and close. (I tried, the sequence is impossible... or unless
    someone has a much more clever solution than I do. Or maybe they
    can write me a script?) If I do it manually, its hundreds of images
    that would require days.
    Do anyone have any clever solutions that can either tackle
    the aspect of the original data images (thus, some solution with
    photoshop) or some blatantly obvious solution that I can do with
    dreamweaver. Any help that can help me accomplish my task is very
    welcomed. Thanks in advance

    You have to do this in two steps if you are doing it in a
    graphics editor.
    Figure out which dimension is the one 'out of size' for your
    final 200x200
    max limits. Resize that single dimension first. The other
    will be no
    greater than your 200 max.
    If you are using PHP you can find some nice resizing
    algorithms on
    http://www.php.net.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "Bih Wang" <[email protected]> wrote in
    message
    news:[email protected]...
    >I have a lot of images at either square (500px), 500px
    width, or 500px
    >height.
    > What I am trying to do is to fit them into a 200 by 200
    area.
    >
    > Now, the problem is that I am getting the images (their
    location rather)
    > from
    > a php database that I created. Which is fine, except
    because I set a
    > repeat
    > area (so that I don't have to put in every picture
    manually) on the css,
    > and it
    > seems to require a predetermine width or height to be
    either auto or a
    > certain
    > size (in my case, 200px),
    >
    > And that's the messy part. Those images with... say...
    500x146 will be
    > out of
    > proportion. (since the 500 will be shrunk to 200 while
    146 will be
    > expanded)
    > Square is perfectly fine because they are getting
    reduced by the same
    > increment. But the rectangles are really giving me
    problems. (Defining
    > either
    > width or height to be 500 and leaving out the other to
    be auto is not an
    > option
    > either, consider I have images that are 500x321 or
    321x500)
    >
    > Well, the obvious solution is to resize everything to
    the 200 px
    > proportion.
    > Yet, that presents 2 problems;
    > 1) I want to let dreamweaver do the resizing so that I
    can still show the
    > 500px images when open in new window.
    > 2) I can't seem to find an automated way to create a
    square image in
    > photoshop
    > then copy the 500px images onto it, resize, save, and
    close. (I tried,
    > the
    > sequence is impossible... or unless someone has a much
    more clever
    > solution
    > than I do. Or maybe they can write me a script?) If I do
    it manually,
    > its
    > hundreds of images that would require days.
    >
    > Do anyone have any clever solutions that can either
    tackle the aspect of
    > the
    > original data images (thus, some solution with
    photoshop) or some
    > blatantly
    > obvious solution that I can do with dreamweaver. Any
    help that can help
    > me
    > accomplish my task is very welcomed. Thanks in advance
    >

  • Manage Team link doesn't go anywhere - the loading square keeps rotating

    I am trying to Manage Team and when I click on the link the four squares come up but nothing else happens - it was loading for over 10 minutes.

    Try the Adobe Story forum: http://forums.adobe.com/community/cslive/story

  • Adobe LiveCycle issues: image-proportion & print-by-checkbox

    LS
    Here is the thing I have
    - PDF with multiple pages
    - page one is a form
    - users fill in some data which is auto-placed on different pages
    - users place a logo (in a ImageField, placed with LiveCycle) which is auto-placed on different pages
    - users check a box whether they want the page to be printed
    The problem
    - the data placed and auto-placed is no problem
    - the placed logo is OUT OF PROPORTION (and yes; the field is set to "keep proportions"
    - the checkboxes can be checked but the placed script under the custom print-button does not work
    The print-script used (placed in the Script-Event field)
    if (getField("Check Box1").value !== "Off") {
    print({
    bUI: false,
    nStart : 1, nEnd : 1});
    if (getField("Check Box2").value !== "Off") {
    print({
    bUI: false,
    nStart : 2, nEnd : 2});
    if (getField("Check Box3").value !== "Off") {
    print({
    bUI: false,
    nStart : 3, nEnd : 3});
    What I am looking for
    - we are looking for one who can provide me with a working solution for the print-problem. Once again; users must be able to check boxes on the first page, refering to pages to be printed or not
    - also we would like a solution to keep the user-placed logo's in proportion
    What I have to offer
    - we will give you € 50,- for the print-solution.
    - the proportion-solution is , so I heard, a program-bug. So this might not be solvable?
    Many thanks,
    Frank Puts - Netherlands

    This forum is for Acrobat Forms created with the Acrobat Forms Tool Bar and not LiveCycle Designer forms. You may find more and better help in the LiveCycle Designer forums.

  • How to get background image to fill the browser and remain fixed in both IE and Firefox?

    Basically what it says in the title. I've come very close in achieving this but something just doesn't tie up in the html and css code...
    First of all, I'm using IE8 and the latest version of Firefox to test this.
    I used 2 sources of information for getting this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and 2) http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesnt-make-image-co ver-vertically
    In Case 1 the example on the page called CSS-Only Technique #1 gives code that works almost perfectly for me, except that obviously I need a background image, however the CSS provided there is clearly just for an image dropped in the body of a page with no regard for other content that may already be there. The html code that I put on the page is simply <img class="bg" src="../images/background_image.jpg">
    Obviously I used the CSS code provided in the example, minus the last bit which is "@media screen" etc etc, which seems irrelevant to me. Obviously substituting values to suit the image on my page.
    So what happened is that it almost worked as intended in both the browsers (which means the image filled both browsers width-wise as intended and also remained fixed when I zoomed in or out in each case) except that the image went over the top of the current content that I had there already precisely because it's not a background in this "technique". (A curious side-note is that the image didn't push down the content, as I'd have expected in normal circumstances, but went right over the top of it so it hid it (like z-index).
    One thing that does bother me about this "technique" is that if you click on View Demo just below the code provided you will see on the working example page (forest background) the image clearly works as a background and the content sits happily on top! So I don't know whether the person providing the example was trying to mislead people or what! Or he got lazy and showed a different page that didn't use the exact code he provided. No matter.
    In any case this leaves me with the job only half finished, as I still need a background image that works like the 'normal image' code provided.
    On to Case 2 and on this page the first example provided gives the CSS for the background image - namely the code within html {...} part and also shows the same 'normal image' code as given in Case 1. In this case however, although the person provided a suggestion, the css and html doesn't really tie up properly plus some of the css and html seems a bit redundant. So this time when I used the 'html portion' of the CSS code (i.e. just the bit that was most relevant) I got two different behaviours in each browser and neither of which was quite what I'm looking for. In IE8 initially the page looks fine (background fills the page and content is on top) however when I zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox the background image DOES stay fixed, however because the image originally is not the whole height of the browser I'm guessing the code stretches it downwards (while keeping proportions - so the image essentially enlarges) to fill all of it. The quick way to get around it is to probably add some white space to the bottom of the image just to give it enough height that it doesn't stretch/resize automatically. But it would be nice to find out anyway how to get around this in the code. Overall I would say that the result in Firefox comes closest to the desired solution but of course it doesn't help matters with IE8.
    Apologies for the lengthy description but that should at least provide plenty info for anybody that might have a possible solution for me. Essentially what would be great is if somebody could advise me how to take the code from Case 1 and apply it to a 'background' piece of coding like the type that's contained within html {...} in Case 2. Like I said, it's so nearly there but I just can't make it work atm after trying to combine the various bits of code this way and that... Alternatively, if somebody has another html-css version that works nicely for achieving this then please by all means let me know! Thanks v much in advance!

    This works in modern CSS3 supporting browsers.  But not pre-IE9.
    http://alt-web.com/TEST/Resizable-BG.shtml
    Nancy O.

  • Saving one frame at a time?

    Cheers!
    I am using Low-level Grab Raw Data.vi example from NI-IMAQ. I want to save one frame at a time and then set the file position to end (and maybe add some mark that I recognize where the next frame begins). I know that it copies the raw data of the specified frame into Image Data Array. But does it write (in this example) data of one frame to disk and then set file position to end? If not, how to modify it?
    How does changing number of buffer affect? I mean if I increase it >1 does it affect to number of frames to write per one iteration time of while loop?
    I have Pixelink PL-B741F-BL camera. http://www.pixelink.com/products_info.asp?productc​ode=PL-B741F-BL&f-category=CMOS%20Imaging%20Module​...
    Kudos for good help!
    Jick
    Attachments:
    Low-Level Grab Raw Data.vi ‏45 KB

    LH,
    You may (you can see Groups in the Layers palette with the layer expanded):
    1) Ctrl/Cmd+A to select everything and Ctrl/Cmd+Shift+G to Ungroup ;
    2) ShiftClick the circle to deselect it; if it is still a Group (all of its own), Ungroup again;
    3) With the Centre Reference Point ticked in the Transform palette multiply the W or H value by 1.1 (just add *1.1 in the box) and Ctrl/CmdEnter to keep proportions (this is to make sure that they are long enough);
    4) Ctrl/Cmd+A to select everything again and Pathfinder>Divide (this will make pie pieces);
    5) Drag over the centre with the Direct Selection Tool and press Delete (this will rid you of the inner parts of the pie pieces so you just have the outer rim in pieces).
    This should give you the 30 independent curved lines forming the circle, two of them with an extra (original) Anchor Point.

  • How do I create links in a file like a table of contents to different sections in a .pdf document?

    I'm trying to take multiple files and create one large (165 page) document but would like to create links to the different "chapters" within the document. 

    LH,
    You may (you can see Groups in the Layers palette with the layer expanded):
    1) Ctrl/Cmd+A to select everything and Ctrl/Cmd+Shift+G to Ungroup ;
    2) ShiftClick the circle to deselect it; if it is still a Group (all of its own), Ungroup again;
    3) With the Centre Reference Point ticked in the Transform palette multiply the W or H value by 1.1 (just add *1.1 in the box) and Ctrl/CmdEnter to keep proportions (this is to make sure that they are long enough);
    4) Ctrl/Cmd+A to select everything again and Pathfinder>Divide (this will make pie pieces);
    5) Drag over the centre with the Direct Selection Tool and press Delete (this will rid you of the inner parts of the pie pieces so you just have the outer rim in pieces).
    This should give you the 30 independent curved lines forming the circle, two of them with an extra (original) Anchor Point.

  • Large Photo Gets cropped when displayed in 4:3

    I put a large still into my movie but the left and right portions are cropped out when I view it as a movie with a 4:3 ratio.  What can I do to the photo to get the whole thing to display?

    Hi
    2184 x 366 - ?
    A picture of a snake ? or a Super Panorama ?
    What size is the movie You are working in
    Tape formats    . . . . . . . . . . Max Lines of resolution 
    . . . . . . . . . . . . . . . . . . . . . . . . . NTSC . . . . . . PAL
    VHS, VHS-C . . . . . . . . . . . . . . . 240 . . . . . . . 312
    8-mm . . . . . . . . . . . . . . . . . . . . . 280
    Live TV broadcast . . . . . . . . . . . 480 . . . . . . . 625 ?
    S-VHS, Hi-8 . . . . . . . . . . . . . . . . 400
    Digital satellite broadcast . . . . . . 400
    MiniDV . . . . . . . . . . . . . . . . . . . . 500
    High definition . . . . . . . . . . . . . . 720x1440 or 1080x1920
    In PhotoShop Elements - You can
    • Change no: of pixels - keep proportions - With black boarders (letterboxed/columned)
    • Change - but also the Proportions (Stretched - one way or the other)
    Yours Bengt W

  • Auto text font size

    Is there a way to set a text box so it keeps all the letters within the box at the maximum font size?
    for example:
    set a box 4x1 inch
    type a 4 letter name and from the start of the first letter to the end of the last letter be 4 inches
    then type an 8 letter name and from the start of the first letter to the end of the last letter be 4 inches again.
    My Dymo label maker software can do this. surely illustrator can too!
    if not, is there any scripts / alternatives?
    Thanks!!

    Jamie,
    Sorry, now I believe I understand.
    Unless you actually need a box, you may create the text as noermal live Type, then in the Transform palette set the desired W (width) value and Ctrl/Cmd+Enter to keep proportions.
    If you need a box, you may:
    1) Create the Type normally;
    2) In the Appearance palette flyout click Add New Fill/Stroke, depending on which kind of box you want;
    3) Drag the new Fill and/or Stroke down beneath the Characters in the main Appearance palette window and set the desired Color(s) and possible Stroke Weight;
    4) Effect>Convert to Shape and tick Rectangle, then set the Relative>Extra Weight/Height as desired (maybe 0), depending on how much you want it larger than the Bounding Box (you may set a positive value for Weight and 0 for Height);
    5) In the Transform palette set the desired W (width) value and Ctrl/Cmd+Enter to keep proportions.

  • Printing from Photoshop using AppleScript

    I am working on a project that will automatically print an image that is moved to a folder.
    Right now, I have the following working: the image from my camera saves to a folder on my desktop, then applescript opens the image in Photoshop and runs an action on it that resizes it, crops it, and then re-saves it into a different folder. Here's where my problem starts...
    My printer - an Epson R800 - does not have a default paper size of 5x7 borderless. That selection has to be made in Photoshop, however, Photoshop actions will not capture paper settings. (Which I think is sooooo stupid, but that's another issue.)
    When the image is dropped in the second folder, it currently automatically prints, but on "letter" size paper.
    I need to script the following:
    Tell Photoshop CS4 to open the image (well, I can do that), but then select the correct paper size (5x7 borderless), and print. I've tried a few different things and they aren't working.
    Any help would be appreciated!
    Thanks,
    Michelle

    Here is a starter that is working just fine at work where I have access to CS2 and printers…
    -- A path to an image file as text
    set PrintImage to (path to desktop as text) & "HE2015.tif"
    tell application "Adobe InDesign CS2"
    activate
    -- Turn off the app dialogs
    tell script preferences
    set user interaction level to never interact
    end tell
    -- Get the new document preset
    set DocPreset to document preset "A4-P" -- Change here
    -- Make our new doc
    set PrintDoc to make new document at beginning ¬
    with properties {document preset:DocPreset}
    -- Get the printer preset
    set PrintPreset to printer preset "Xerox A3-P-SEF" -- Ditto Here
    tell PrintDoc
    set DocWidth to page width of DocPreset
    set DocHeight to page height of DocPreset
    -- Add a rectangle to hold the image
    set ImageFrame to make new rectangle at beginning ¬
    with properties {geometric bounds:{0, 0, DocHeight, DocWidth}}
    tell ImageFrame
    -- Put our image in the rectangle
    place PrintImage as alias
    -- Fit our image to fill box keeping proportions
    tell image 1
    fit given fill proportionally
    fit given center content
    end tell
    end tell
    print using PrintPreset without print dialog
    end tell
    end tell
    There are two strings that you will need to change one for a 'new document preset' and the second for a 'print preset'…
    The example just uses an image off my desktop to test with… Any problems post in the Indesign forum as this no longer belongs here…

  • Airplay instructions on AppleTV Screensaver

    I have turned Airplay off in Settings. When my screensaver for Apple TV activates, A black square keeps appearing with instructions how to access Airplay and I can't get rid of it. Any ideas?

    Settings > AirPlay > Conference Room Display > Off.

  • How to use a wireles printer

    How can I use the epson wireless printer with Ipad 3?

    If your printer doesn't support Airprint (Apple's technology, not Epson's) then you will either need the Epson iPrint app, or a third party app like Print n Share. The Epson app lets you print photos and web pages (by cutting and pasting a link into the app) but it has some limitations - you can't print pages that expire, e.g. secure order confirmation pages.
    You also can't print things from the Apple apps like Numbers or Pages etc, because they have removed the ability to save as PDF, such that if you don't have a printer with Apple's Airprint, Apple have made life a lot more complicated.
    What you can do, and it's the best you can do in the circumstances, is Share and Print your document, choose Email spreadsheet, and send in whatever format you choose (PDF might be easiest to keep proportions) and then email the file to yourself. You should then use the Mail app to retrieve your email (and not, say, the gmail app because it won't work), then tap and hold the file in your email and you can 'Open in...' and choose Epson iPrint.
    That will work, but it's a shame you can't just print the file over your wifi the same way you can from a macbook.

  • Problem with page scaling.

    I'm afraid this may be an elementary level problem, but I'd appreciate advice.
    I am trying to resize a book from page size 135 x 215mm to 129 x 198mm. I can do this by printing to a postscript file, specifying the paper size as 129 x 198, and checking scale to fit. Then I distill to a pdf. This gives me an acceptable looking page. However, for the purposes of printing, I wish to include crop marks. When I specify crop marks when saving the postscript file, I get them in the eventual pdf, but within the page size of 129 x 198, and the actual page itself is reduced to about 83% of what it should be! It doesn't help that mathematics is not my strong point. Is there any way (there must be) that I can save the postscript file so that I can include crop marks and when the printer trims the page it is at the correct size of 129 x 198mm?
    Any help appreciated, thanks.
    Tom.

    Very many thanks, Peter -- this script is magic and has completely solved the problem. Being able to select the options of scale to fit, keep proportions 100% and centre on the page in the new file takes the uncertainty out of the import. Thanks too to Luke for setting me off in the right direction. I'm going to be using this method with a lot of our reprints which are going into a slightly different format.
    Tom.

  • Image resize problem

    For the life of me I can't figure out why this isn't working properly. I've been resizing images this way for months now and I must have changed some setting or whatever cause it simply doesn't work. Please be kind if I'm posting improperly as this is my first time posting here.
    Here's the situation. I have an image below at resolution 5000x2048.
    When I trim the canvas everything works properly as seen below.
    Due to the Trim canvas, the image is now 2071x1252. I want to resize the entire image to 1680 & keep proportions as shown below.
    Here's where I run into problems. I've never had it do this before, and I can't figure out how to fix it. When I resize the image, I get the following.
    As you can see, the canvas resized properly, but the vectors resized a whole lot smaller. Any help would be greatly appreciated.
    Message was edited by: A. Buskov

    That's perplexing. Just out of curiousity: Is everything a vector, or is it a mix of vectors and bitmaps? It appears that some of the components resized properly, where others did not.
    Since you know what dimensions you're shooting for, you could try reversing the order of things: resize, then trim. First figure out the percentage by which you were reducing the trimmed image size: 1680 / 2071 = 81.12%. Now apply that percentage to your initial image size: 5000 x 2048 becomes 4056 x 1661. Do the same sizing discrepancies occur? If not, then apply the Trim Canvas command, and you should be good to go.
    Alternatively, if you're resizing this graphic for output, you could simply use the Image Preview dialog instead (after trimming).
    Another troubleshooting idea: Have you tried saving the graphic immediately after applying the Trim command, and then resizing?
    Finally, how about using Modify > Transform > Numeric Transform... and then choosing either Resize or Scale?

  • Two Page/Bleed Spread? InDesign Newbie question

    Hello,
    I am hoping you can lead me in the right direction, I have a quick (probably basic) question that I can't figure out! I am new to InDesign and am trying to figure out the best way possible to have one image go across the span of two pages, with a .5in border around it. I already have the border and everything all set, but I am having issues getting my image to "stretch" properly and stay in proportion so there is no distortion. I know how to do fit to frame, but the problem is that the frame that I am creating spans both pages and therefore it does not keep proportions correct. If I do fit to frame proportionally it will just put the image on one page instead of two.
    Also, I am curious what the best way is to do this so that I can account for gutter space and do not loose part of my image in the fold of the book. Can you help? Thanks so much in advance!!
    Phil Spiegel

    Use fill frame proportionally in the fitting options.
    If it's a photo, make sure you have a enough image date. Check the
    effective resolution in the info panel.
    Bob

Maybe you are looking for

  • Price Comparision not for RFQ

    Hi, My client requirement is to compare the price with following pricing elements before creating the PO we are not creating RFQ's here ,when we enter below values for each vendor, it should dispay the report as it shows in ME49 Basic Value Less disc

  • Shared Review Acrobat X Shows copy of 1st review file opened

    I have organized many shared reviews using Acrobat Pro from v. 8 until  X. Ever since my Windows upgrade I have encountered some problems. The most egregious of these is the following: If I open up a Shared Review pdf I can only see it as I saw it th

  • Error handling in generated stubs

    Hello, I've been playing around with Flex Builder 3 and WS and I am puzzled by how one can handle generic SOAP error messages (i.e. not the service faults, but connection errors, message parsing related errors, etc.). Here is what I try: 1 Generate s

  • Comps.xml in Oracle 8i inventory on Windows systems

    "comps.xml" file listing the Oracle installed components along with their details is usually found in the Oracle inventory directory (%ORACLE_HOME%\Inventory\ContentsXML\comps.xml). But I noticed on a few Oracle 8i database installations that the fil

  • Heuristic SAP_PP_009 (Bottom Up) & Finite scheduling

    I want to execute heuristic SAP_PP_009 and execute also finite scheduling. Standard SAP does not allow it. Using note 560969 it is possible to use a finite strategy in SAP_PP_009  although it still does not recommend it. I implemented it and I used o