Is there a way to ensure that these images stay square even while resizing the window?

I came across this interesting code sample:

link

Snippet of CSS Code:

.container{width:100%;background:yellow;height:100vh;}
    .top{
      width:100%;
      height: 60%;
      position:absolute;
      top:0;
      background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/BANNER-300x215.png") no-repeat center center #B03D3D;
      background-size:cover;
    }
    
    .left{
      width: 50%;
      height: 40%;
      position:absolute;
      bottom:0;
      background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS2-300x246.png") no-repeat center center #B03D3D;
      background-size: 100% 100%;
    }
    
    .right{
      width: 50%;
      height: 40%;
      position:absolute;
      bottom:0;
      right:0;
      background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS1-300x246.png") no-repeat center center #B03D3D;
      background-size: 100% 100%;
    }
<div class="container">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>    
</div>

The issue is that the images below should always appear as squares, but when resizing the window they become rectangles.

Take a look at the image linked here:

It seems that all three images need to be square. Can you provide any insights on how to fix this problem?

Thank you in advance!

htmlcss

Answer №1

To achieve a full background fill, set one dimension to auto and the other to 100%

https://jsfiddle.net/1vj6abkh/

If you prefer to fill your div vertically instead, swap width with height

Answer №2

To achieve square images, consider using padding-bottom instead of setting a fixed height.

Keep in mind that padding affects the width as well.

Here is an example with minimal adjustment to your existing styles (though there may be more efficient methods):

.container{width:100%;background:yellow;height:100vh;}
.top{
  width:100%;
  height: 60%;
  position:absolute;
  top:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/BANNER-300x215.png") no-repeat center center #B03D3D;
  background-size:cover;
}

.left{
  width: 50%;
  height: 0;
  padding-bottom: 50%; /* Square aspect ratio */
  position:absolute;
  bottom:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS2-300x246.png") no-repeat center center #B03D3D;
  background-size: 100% 100%;
}

.right{
  width: 50%; 
  height: 0;
  padding-bottom: 50%; /* Square aspect ratio */
  position:absolute;
  bottom:0;
  right:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS1-300x246.png") no-repeat center center #B03D3D;
  background-size: 100% 100%;
}
<div class="container">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right"></div>    
</div>

Answer №3

Give this a try when your screen size changes:


@media (max-width:767px) {

.container{width:100%;background:yellow;height:100vh;}
.top{
  width:100%;
  height: 60%;
  position:absolute;
  top:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/BANNER-300x215.png") no-repeat center center #B03D3D;
  background-size:cover;
}

.left{
  width: 50%;
  height: 40%;
  position:absolute;
  bottom:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS2-300x246.png") no-repeat center center #B03D3D;
  background-size: 100% 100%;
}

.right{
  width: 50%;
  height: 40%;
  position:absolute;
  bottom:0;
  right:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS1-300x246.png") no-repeat center center #B03D3D;
  background-size: 100% 100%;
}
}

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

Use Flexbox hover effect to display submenu text exclusively in the column being hovered

Having an issue with a 5 column flexbox. Each box should display a header text and supplementary text only when hovered over, returning to normal when unhovered. I was able to accomplish this in Codepen (view the rough model here). However, when trying to ...

htmlcssflexboxelementor

JavaScript Animation of Text

I have a challenge where I want to animate text's opacity in JavaScript after the user presses enter. However, I am struggling to achieve this with my current code. I can provide all of my code for you to review and help me understand why the animatio ...

javascripthtmlcssanimationtext

Tips for adjusting large resolution images to fit all screen sizes without exceeding the boundaries of the screen

I am in the process of creating a set of HTML pages specifically tailored for iPad Air and iPad Mini. These pages will feature several large images, with dimensions such as 1600x300. However, upon testing in Windows browsers, I encountered an issue where t ...

htmlcssipad

Is it possible for us to customize the angular material chip design to be in a rectangular shape

I recently implemented angular material chips as tags, but I was wondering if it's possible to customize the default circular design to a rectangle using CSS? ...

cssangularangular-material

What holds more weight in CSS: an ID or a class declaration?

In this example, I am using both an ID (#mybox) and a class (.box), but they are both being styled the same. The background color is set through the ID selector. Although I understand the basic difference between an ID and a class, in this specific scenari ...

htmlcssbootstrap-4

Reveal and conceal grid elements upon clicking embedded links

I'm attempting to toggle the visibility of div content upon clicking a link. I've tried using a similar approach as shown in http://jsfiddle.net/fXE9p/, but unfortunately it didn't work for me. <body> Clicking on a button should m ...

jqueryhtmlcss

PhP submit triggers fatal error

I am currently developing a form to add records to a database directly from the browser. However, upon submitting the form, I encountered the following error: Fatal error: Call to a member function execute() on boolean in /srv/http/career.php on line 56 ...

phphtmlmysql

Having trouble viewing the footer because I can't scroll down

Hey there! I'm a first-year student from the Netherlands studying ICT&Media Design, and currently tackling projects involving HTML/CSS/JavaScript. As I was working on my personal page to practice with these languages, I encountered some issues. ...

javascripthtmlcss

Unable to display imported image in React application

I have a component where I want to display an image: import React from 'react' import background from '../media/content-background.jpg' function ContentPage(){ return( <div id="content-page"> < ...

htmlcssnode.jsreactjswebpack

JavaScript situation

Need some assistance with my code. I'm trying to display a div when the visibility class is set to visible, but it's not working as expected. Can someone help me troubleshoot this issue? CSS: #nor1 {position:absolute;top:100px;left:100px;z-inde ...

javascriptjqueryhtmlcssif-statement

Vue 3's Paged.js does not respond to requests for page breaks

Currently, I'm working on implementing page breaks in Vue.js 3. Despite my efforts and utilization of the specified CSS code, I am facing challenges with the ".page-break" class parameter. While I can successfully modify other elements like titlePage ...

htmlcssvue.jspagedjs

The ModalPopupExtender has the ability to automatically close

I implemented a ModalPopupExtender to display a panel with a textbox inside. I added some code for the textbox's textchanged event, but every time the focus leaves the textbox, the popup closes automatically. Can anyone suggest a solution to this prob ...

c#jqueryhtmlasp.netajax

PrimeFaces: Achieving Conditional Coloring Based on Status (Passed/Failed)

Attempting to dynamically change the color of a column based on its status value (Passed/Failed/InProgress) using jQuery. I tried copying and pasting the table into jsfiddle, where it worked. However, when implemented in the actual XHTML file, the jQuery ...

jquerycssprimefaces

Tips on causing JavaScript execution to halt until an element has finished rendering

test.view.js timeDBox = new sap.ui.commons.DropdownBox({layoutData: new sap.ui.layout.GridData({linebreak: true}), change: function(oEvent){ oController.getKeyEqChart(); }, }), new sap ...

javascriptjqueryhtmlajaxsapui5

Sharp writing displayed over a 3D-transformed object in the Safari browser

My challenge now is to position text on top of elements that have been transformed using -webkit-transform:translate3d(). The issue I've encountered is that the only effective method I've found to stack an element on top of a 3D-transformed objec ...

safari3dcsstransformation

Error Reference: The variable "angular" has not been properly defined in line 1 of the app.js

WelcomePage.js angular.module("travel") .controller('LoginCtrl', function($scope, AuthService, $ionicPopup, $state) { $scope.user = { name: '', password: '' }; $scope.login = function() { AuthService.login ...

javascripthtmlangularjs

Creating a link button using JavaScript

I have integrated a Setmore code on my website to facilitate appointment booking, which triggers a popup similar to what you would see on a hotel reservation site. <script id="setmore_script" type="text/javascript" src="https://my.setmore.com/js/iframe ...

javascripthtmlcss

Vertically aligning collapsing menus in the center

As I continue to learn about HTML, CSS, and jQuery in order to enhance my personal website, I have encountered some challenges along the way. Thankfully, the support from individuals like yourself has been invaluable. Thank you! Below is the current code ...

css

The CSS child selector seems to be malfunctioning as it is affecting all descendants of the specified type

Struggling with creating a menu containing nested lists. Attempted using a child selector (#menu-novo li:hover > ul) to display only immediate descendants, but all are still showing. Any suggestions or solutions for this issue? #menu-novo-container { ...

htmlcssdrop-down-menu

Exploring mysterious traits through inheritance

In my Angular and TypeScript project, I have defined an interface: export interface A { name: string; } Now I have two other interfaces that inherit from interface A: export interface B extends A { year: number; } export interface C extends A { ...

javascripthtmlangulartypescript