Databases
StackOverflow2013
Postsdbo
POjQuery counts background-image aspect ratio and changes padding value of an element
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery counts background-image aspect ratio and changes padding value of an element
    primarykey
    data
    text
    <p>I hope that someone can help me or give me some instructions how to achieve this. I have fluid div, without height and with width:100%. I want to display background-image which will fit to the screen size and this div element. But sadly I can't use background cover or any other solutions that can normally work in modern browsers. I also can't setup fixed height (it has to be responsive) I've found a solution by using aspect ratio of an image - it's using padding-bottom percentage value but this solution works only with fixed aspect ratio for example for a 16:9 or 4:3. And I need something that will be realy fluid. So I figured it out, that I need some script which will be automatically checking background image aspect ratio and will be changing padding-bottom value according to images aspect ratio. But I'm not sure how to this. I know only the basics of the jQuery.</p> <p>So I’m searching for a script (jQuery) which will be checking the background-image aspect ratio and according to this will change padding-bottom of an element (div).</p> <p>Let’s say that I’ve got:</p> <p>HTML:</p> <pre><code>&lt;div class=“container”&gt; &lt;div style=“background-image: url(‘image.png’)”&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.container { width: 100%; height:0; padding-bottom: 56.25%; } </code></pre> <p>So it will check the aspect ratio of an image (image.png) and will change padding-bottom percentage value (in .container class), example:</p> <p><strong>image aspect ratio: 16:9</strong></p> <p><strong>Height / Width x 100% ** in this case: **9/16 x 100% = 56.25%</strong></p> <p><strong>padding-bottom: 56.25%;</strong></p> <p>Is it possible ?</p> <p>If it is not possible to make this change in css file it can be also applied inside the inline css, like here:</p> <pre><code>&lt;div class=“container” style=“padding-bottom:56.25%”&gt; &lt;div style=“background-image: url(‘image.png’)”&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Any solutions using background-image:cover / contain or any other won't be a solutions that will fit my needs. Sadly I need to do this by using jquery which will be checking the aspect ratio.</p> <p>I hope that someone can help me with this.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USpi.
    1. USpi.
    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
    1. This table or related slice is empty.
    1. COConstruct a new `Image` object in JS, assign the background image URL to its `src` attribute (pay attention to using the correct path if you want to read that value from the styles dynamically), and then in the load handler for that image read its dimensions …
      singulars
      1. POjQuery counts background-image aspect ratio and changes padding value of an element
      1. USCBroe
 

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