Databases
StackOverflow2013
Postsdbo
POSet height of div wrapper by image width size
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSet height of div wrapper by image width size
    primarykey
    data
    text
    <p>Going to try and re-explain what I am trying to do here. It seems there is a little confusion around the <code>div</code> / <code>img</code> example. In short, what I am trying to do is create a wrapper around an image that stays as a square, but expands in size responsively as the browser window adjusts. The image inside the square will also adjust size within the square wrapper (<code>div</code>) to fill the space. The images are all pretty much the same width, but the height varies, and I want to position on top and hide the bottom for anything larger then the square wrapper. Because the square wrapper will resize with the window I cannot set a size an actual size to this <code>div</code>, but would like to adjust automatically.</p> <p>Hope this helps.</p> <p>So here is what I came up with. Which seems to work for the most part.</p> <pre><code>var divWidth = $('.photo').width(); $('.photo').height(divWidth); $(window).resize(function () { var divWidth = $('.photo').width(); $('.photo').height(divWidth); }); </code></pre> <p>Anyone have any suggestions to add?</p> <p>--- original description ----</p> <p>I'm looking to create a responsive web page with images. Unfortunately not all the images have the same height to width ratio. So was thinking of creating a wrapper around the image that would set the height by the current width of the image, and the rest would be hidden. Looking for the best and simplest way to do this?</p> <p>So what this does is it creates a 2 column list of items that expand with the width of the browser. But unfortunate because of the image sizes some of the items are taller then others. And I want the image to be in a square box width equal widths for conformity. But I don't want to resize the images height wise, just fill 100% width wise, and overflow on the bottom.</p> <p>CSS:</p> <pre><code>.listing ul { position: relative; display: block; padding: 0; margin: 0; } .listPeople li { list-style: none; float: left; position: relative; display: block; width: 48.93617020799999%; height: auto; background: #FFF; border: 1px solid #D0D5D8; padding: 12px; margin: 0 15px 15px 0; } .listPeople li .user .photo { position: relative; display: block; background: #FFF; box-shadow: 0 1px 2px rgba(0,0,0,0.09); border: 1px solid #DDD; padding: 8px; margin: 0; } .listing li .user .photo img { width: 100%; height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; padding: 0; margin: 0; } .listing li .content { float: left; position: relative; display: block; width: 74.468085099%; height: 100%; padding: 0; margin: 0; } </code></pre> <p>HTML:</p> <pre><code>&lt;div class="listing"&gt; &lt;ul&gt; &lt;li&gt; &lt;div class="user"&gt; &lt;div class="photo"&gt; &lt;a href="#"&gt;&lt;img src="URL" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;a class="button"&gt;Follow&lt;/a&gt; &lt;/div&gt; &lt;div class="content"&gt; -- normal html formatting -- &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMichael Coleman
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSet height of div wrapper by image width size
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POSet height of div wrapper by image width size
      1. This table or related slice is empty.
      1. VTDownMod
    1. COThe code, where is it? (Show us what you've tried and what you're struggling with)
      singulars
      1. POSet height of div wrapper by image width size
      1. USpilsetnieks
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload