Is it possible to center the image and resize it even when the window is resized?

My goal is to position an image in the center of the screen by performing some calculations. I've tried using:


var wh = jQuery(window).innerHeight();
var ww = jQuery(window).innerWidth();
var fh = jQuery('.drop').innerHeight();
var fw = jQuery('.drop').innerWidth();

However, I can't seem to figure out where I went wrong. I also attempted to adjust for window resizing with:


jQuery(window).resize(function() {
    var wh = jQuery(window).innerHeight();
    var ww = jQuery(window).innerWidth();
    var fh = jQuery('.drop').innerHeight();
    var fw = jQuery('.drop').innerWidth();
});

Even after resizing the window, the image still doesn't align to the center as intended. Is there a method to ensure that the image remains centered even when the window size changes?

You can view the code on JSFiddle.

javascriptjqueryhtmlcss

Answer №1

Why not give this a shot:

$(window).resize(function () {
    $('.drop2').css({
        position: 'absolute',
        left: ($(window).width() - $('.drop2').outerWidth()) / 2,
        top: ($(window).height() - $('.drop2').outerHeight()) / 2,
    });
});

See it in action here

Answer №2

If you want to achieve this effect using only CSS, you can follow these steps:

div{
  background: red;
  bottom: 0;
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}

View the demo on Fiddle and Read more about centering elements with CSS in this Article

Answer №3

This is how I implemented it in my project.

.side {
height: 357px;
background-color: red;
overflow: hidden;
position: relative;
}
.middle {
position: absolute;
left: 50%;
margin-left: -250px;
background:url('a.jpg') no-repeat;
width:500px;
height:357px;
}


<div class="side">
<div class="middle"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Highchart for JSON Data Processing

I'm currently working on creating a simple bar chart using JSON data. Here's what I've attempted so far without utilizing the JSON data (http://jsfiddle.net/6hkcn4qf/2/). To achieve the same bar chart, I need to utilize this sample JSON htt ...

jqueryjsonhighcharts

What is the process for incorporating a script function into a React application?

Recently, I've been attempting to integrate the external application Chameleon into my React application. To achieve this, I need to incorporate the javascript function within my application. I prefer it to be invoked only in specific scenarios, so I ...

javascriptreactjsasynchronousreact-helmet

Bringing in SCSS using Typescript, React, and Webpack

I am trying to utilize .scss classes by importing them and applying them to the className property of a React component. Here is the structure of my project : root/ ... config/ ... webpack.config.js src/ ... global.d.ts app/ ...

javascriptreactjstypescriptwebpacksass

Rejuvenate your Bootstrap Accordion with these Settings

Using bootstrap documentation, I have implemented an accordion in my web application with the following code: <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class=" ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

Exploiting jQuery UI in a Web Browser Bookmarklet

When using CoffeeScript, even though the code is very similar to JavaScript: tabs_html = "<div id='nm-container'><ul><li><a href='#tabs-1'>Guidelines</a></li><li><a href='#tabs-2'& ...

javascriptjqueryjquery-uibookmarkletcoffeescript

Unable to be implemented using inline-block styling

I'm struggling to get these 2 elements to display side by side using inline-block, I've tried everything but nothing seems to work. Goal: First element Second element I attempted to modify the HTML code to see if it would yield any results, b ...

htmlcsstwitter-bootstrapvue.js

Using the splice() method to remove an item from an array may cause unexpected results in React applications

Dynamic input fields are being created based on the number of objects in the state array. Each field is accompanied by a button to remove it, but there seems to be unexpected behavior when the button is clicked. A visual demonstration is provided below: ...

javascriptarraysreactjs

How to display JSON containing nested objects in AngularJS using the ng-repeat directive

Hey everyone, I have this JSON external file that I need help with: { "success":true, "errors":[ ], "objects":[ { "cod":"8211300", "descricao":"Serviços advocatícios" }, // more objects here... ] } In ...

javascriptangularjsjson

Invoking an ajax request from the success callback of another ajax request

When you click on a singer class button, the name of the singer along with buttons that have the music class and their respective songs (data) are displayed. Clicking on a music class button will show the song lyrics (data2). At this point, I would like ...

jqueryajax

The slideUp function is not functioning as expected

I am trying to implement a slideUp effect on my webpage. Here is the code within my <body> tag: <script> $('#slide_up').click(function(){ $('p.text_study').slideUp('slow', function() { $ ...

javascripthtml

Transforming jquery code into angularjsAre you looking to migrate your

I am currently struggling with converting a jQuery function into an AngularJS function. Here is the specific code snippet: $('p').each(function() { $(this).html($(this).text().split(/([\.\?!])(?= )/).map( function(v){return '< ...

javascriptjqueryangularjs

How can Angular incorporate JSON array values into the current scope?

I am currently working on pushing JSON data into the scope to add to a list without reloading the page. I am using the Ionic framework and infinite scroll feature. Can someone please point out what I am doing wrong and help me figure out how to append new ...

javascriptjsonangularjslistionic-framework

A tag that does not adhere to the background color's rgba opacity restrictions

Can you believe what's happening to me? Check out this code snippet. I'm trying to apply an rgba color to my a tag, but it's acting like an rgb color instead of the intended rgba. The text background is solid, but the rest of the background ...

cssbackground-coloropacity

The functionality of Anchor `<a>` tags is compromised in Chrome when using the hashtag symbol (#)

Below is the code I have implemented on my website: <li><a href="/explore/#Sound">Sound</a></li> (This menu is visible on all pages) <a id="Sound"><a> (This is on the specific page where I want to link to) I have at ...

htmlgoogle-chromecross-browser

I am sometimes experiencing issues with activating ajax code using Bootstrap 3 modal

I'm stumped trying to find a solution for this issue. Currently, I am utilizing the bootstrap modal to retrieve ajax content from a specified URL. To prevent content overlap, I am using $.removeData() when reloading the content. The problem arises w ...

javascriptjqueryajaxtwitter-bootstrap-3

CSS animations using keyframes to continuously move text from left to right

I've been experimenting with text animation, and I've noticed that at the end of the animation, there is a sudden transition cut. What I'm aiming for is to have the text continuously shifting. text { animation: scrollText 5s ...

htmlcss

What sets apart jquery-1.3.2-vsdoc.js from jquery-1.3.2.min-vsdoc.js?

I'm curious about the distinction between these two files. I understand they are used for intellisense in Visual Studio, but why would there be two versions of it? Is the only dissimilarity between jquery and jquery minified simply the removal of com ...

.netasp.netjquery

Tips on automatically focusing on an input within a Semantic UI React dropdown

I'm attempting to automatically focus on an input located within a Semantic UI React dropdown by using a ref, but unfortunately, it's not functioning as expected. The input should be focused when the dropdown is opened. Check out the code sandbox ...

javascriptreactjssemantic-ui-react

Determine if the same origin policy is in effect

Is there a method to determine if the same origin policy is applicable to a URL before attempting to use ajax methods? Below is an example of what I currently have: function testSameOrigin(url) { var loc = window.location, a = document.create ...

javascriptjqueryajaxcross-domaincross-domain-policy

Update the content according to the size of the screen

I'm currently working on a project where I need to redirect pages based on screen sizes. I have separate index files for the mobile and web versions of the website. In the web version's index file, I've added the following script: <scri ...

javascripthtmlmedia-querieswindow.location