Databases
StackOverflow2013
Postsdbo
POAligning images like google image search does
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAligning images like google image search does
    primarykey
    data
    text
    <p>Google shows its images like this: <img src="https://i.stack.imgur.com/q9PkG.png" alt="align1"></p> <p>But then when I try to do it, I get this:</p> <p><img src="https://i.stack.imgur.com/43C2G.png" alt="align"></p> <p>It seems this will need something more than just float:left, but what? The images will be of unknown height and width. But I put in a max-height and max-width check so it doesn't get too crazy.</p> <p>Note: rowtable is just an array that holds the picture name (id). I cut some stuff out to clean the code.</p> <pre><code>function imageResize($image) { $maxWidth = 500; $maxHeight = 395; $size = getimagesize($image); if ($size) { $imageWidth = $size[0]; $imageHeight = $size[1]; $wRatio = $imageWidth / $maxWidth; $hRatio = $imageHeight / $maxHeight; $maxRatio = max($wRatio, $hRatio); if ($maxRatio &gt; 1) { $outputWidth = $imageWidth / $maxRatio; $outputHeight = $imageHeight / $maxRatio; } else { $outputWidth = $imageWidth; $outputHeight = $imageHeight; } //echo 'width="'.$outputWidth.'" height="'.$outputHeight.'"'; return 'width="'.$outputWidth.'" height="'.$outputHeight.'"'; } } $image = "images/screenshots/$rowtable[id].png"; ?&gt; &lt;div style="float:left; padding:5px;"&gt;&lt;img src="&lt;?php echo "images/screenshots/$rowtable[id].png"; ?&gt;" &lt;?php echo imageResize($image); ?&gt;&gt;&lt;/div&gt; </code></pre> <p>UPDATE:</p> <p>After watcher's comment, it works. But how can I get this?</p> <p><img src="https://i.stack.imgur.com/zTgUD.png" alt="align3"></p> <p>So have a wide picture center vertically, rather than sticking to the top.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USnatli
    1. USnatli
    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. POAligning images like google image search does
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POAligning images like google image search does
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POAligning images like google image search does
      1. This table or related slice is empty.
      1. VTUpMod
    1. COmake the containing div's height the max-height you want; give the padding to the img
      singulars
      1. POAligning images like google image search does
      1. USmreq
    2. CO@PetrMarek how can I know when to close off a containing div and start a new one? As the user changes the browser window size, more (or less) pictures will be shown per line.
      singulars
      1. POAligning images like google image search does
      1. USnatli
    3. COFYI, always try reverse-engineering. Use, Chrome's developer tool (f12) or Firefox's. In Chrome, choose the image, right click and select inspect element. You will see CSS options on the right, uncheck the marks and see what's the purpose of it. That way you can learn way better and faster
      singulars
      1. POAligning images like google image search does
      1. USUmur Kontacı
 

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