How can we ensure the original aspect ratio of an image remains intact when cropped within a

Currently, I am working on customizing the theme of a website and have encountered an issue with an image that is cropped vertically within a div. You can check out the codepen or example below: https://codepen.io/hioioasd90/pen/LzvmpW

I want the full image to be displayed while also being scaled to fit the width of the container. Modifying the CSS in Chrome console by increasing the height: 27vh; value shows more of the image inside the div but it starts overflowing the max width boundaries.

.container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;

}

.img-cover-category {
    background: none no-repeat center center;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 0;
    padding: 0;
    height: 27vh;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-bottom: 0px;
}
<div class="container">
<div class="img-cover-category" style="background-image: url(https://writernikhilpro01.files.wordpress.com/2015/08/unsplash-laptop-desk.jpg);"></div>
  
</div>

htmlcssimage

Answer №1

Depending on your goal, one suggestion is to remove the duplicated code:

background-size: cover; // this is repeated in the CSS

and replace it with:

background-size: contain; // updated version for all browsers

Next, adjust the image size accordingly.

Here are the lines to be removed:

.img-cover-category {
    background: none no-repeat center;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    z-index: 0;
    padding: 0;
    height: 27vh;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-bottom: 0px;
}

Replace them with the following:

.img-cover-category {
    background: none no-repeat center;
    -moz-background-size: contain;
    -o-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
    position: relative;
    z-index: 0;
    padding: 0;
    height: 27vh;
    width: 100%;
    margin-bottom: 0px;
}

If you want the image to scale while staying fixed at the top rather than centered, adjust this line:

 background: none no-repeat top;

ADJUSTMENT FOR NEW SCENARIO Version A

Instead of altering the image height, set a specific height for the container.

.container {
    max-width: 1000px;
    height: 1000px;
    margin: 0 auto;
    position: relative;
    border: 1px;
    border-color: #000;
    border-width: 1px;
    border-style: solid;
}

.img-cover-category {
   background: none no-repeat top;
   -moz-background-size: contain;
   -o-background-size: contain;
   -webkit-background-size: contain;
   background-size: contain;
   position: relative;
   z-index: 0;
   padding: 0;
   height: 100%;
   width: 100%; /* This may not be necessary anymore */
   margin-bottom: 0px;
}

Adding min-height: maybe 1000px to .img-cover-category could also make the background visible...

I'm uncertain if this will serve as a header or a background - perhaps substituting an actual image instead of a background would keep it visible at all times...

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

Flexbox search bar positioned above a set of flexbox buttons

In an attempt to replicate Google's search bar, the following code has been developed: <head> <title>Search</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link r ...

htmlcssflexboxcss-position

Switch between Accordions/Tabs with JavaScript (ES6)

Encountering a minor issue with the accordion/tab layout provided in this link: https://jsfiddle.net/drj3m5tg/ The problem is that on mobile, the "+" icon remains as "-" when opening and closing tabs. Also, in desktop view, sometimes tabs need to be clic ...

javascriptcssdomecmascript-6accordion

Make sure to choose the radio button that corresponds to the desired title value, as this will be automatically added to the input text

Visit this link for a live example. <div class='liveExample'> <input type="radio" name="gender" value="Mr." checked>Mr. <input type="radio" name="gender" value="Mrs.">Mrs. <p>First name: <input data-bind=&ap ...

javascripthtmlknockout.js

Empty screens greeting me when I open HTML files

After procrastinating for a while, I finally decided to learn HTML. When I tried creating my first files, they showed up blank for some reason. I'm not sure why this is happening and could use some help. View My Code Check Out the Website ...

html

Attempting to utilize the data inputted into number field1 to be shown in a read-only div2

I have a task of converting a Google Sheets document that gathers various data inputs from users and performs multiple calculations. My goal is to transform it into a webpage connected to an SQL database. To manipulate the calculable data on the webpage, ...

javascripthtmljquerycss

Divide the page vertically. On the left side, feature an eye-catching image, while on the right side,

While I have a good understanding of bootstrap 5, I am currently working on a project that requires me to split the page down the center. However, I also need to incorporate a container in the middle that sets a boundary for the text so it doesn't exp ...

htmlcsstwitter-bootstrapbootstrap-5

Ways to utilize the window.print() function in JavaScript to specify a printing range of pages

Currently, I am in the process of developing an HTML and JavaScript project. One challenge I am facing is figuring out how to print specific pages of my document using JavaScript. I am currently utilizing window.print() for printing purposes. However, I ...

javascripthtml

Retrieve the value of a style property using the css() method

<p class="pen" style="color:#000">abc</p> .pen{ color:#333 } In the previous code snippet, we have an HTML element with inline style and a CSS class that defines color properties. Despite the inline style having higher precedence, jQuery retu ...

javascriptjquerycss

Using JavaScript to grab an entire div containing an SVG element

I am looking to capture an entire div as an image and save it locally as proof. Despite reading numerous articles on converting SVG to image or div to image, I have encountered challenges in achieving the desired result. Several attempts with JavaScript l ...

javascriptjqueryhtmlsvg

Initiate an animation in Wordpress once the entire page has finished loading

Recently, I incorporated some "raw html" elements with animations into my WordPress site. However, the issue I'm facing is that these animations kick off as soon as the page loads, without waiting for the preloader to complete and display the actual c ...

javascriptcsswordpressanimation

Tips for hiding a child element by setting its display property to none while the parent element is set to block

My current setup involves a Bootstrap Jumbotron that wraps a Bootstrap list. The Jumbotrom is hidden by default: <div class="jumbotron" id="shoppingCart" style="display: none"> <h1 class="display-4" >Checkout</h1> <p class="lead" ...

javascripthtmllistbootstrap-4display

Discovering a route with the help of CSS Selector within Selenium

Looking to locate an element using CSS Selector with Selenium in Java. Here's the HTML snippet: <div class="PayMeth" widgetid="PayMeth_0" id="PayMeth_0"> <div class="Icon GIFT" data-dojo-attach-point="pmN"></div> <div class="pay ...

cssselenium

Performing a validation on data fetched using a .load() function

I've been struggling with a persistent issue that I just can't seem to solve. So, here's the situation: I have a blog post on a CMS that I'm developing. The content is saved within a div with its own unique ID. When the user clicks an ...

javascriptphpjqueryhtmlajax

Generating Rain in AFrame

Working on a project in Aframe, I had the idea to incorporate a rain effect into my game. However, all my attempts at using animations have failed so far. Any guidance or tips on how to achieve this rain effect with little rectangular prisms would be great ...

javascripthtmlthree.jsaframe

What is the best way to save an image using Node.js when it is passed as a base64 encoded string?

Utilizing Phantom.js in my Meteor Application, I successfully generated an HTML5 canvas. However, when attempting to save the canvas image to disk, I encountered a problem. The issue at hand is that the saved image file seems to be corrupt, as it cannot b ...

node.jsimagecanvasmeteorphantomjs

JQuery displays 'undefined' on checkbox loaded via Ajax

Currently, I am utilizing a checkbox to activate my select Option tag. The select option tag and checkbox are both loaded via ajax. While the select option works perfectly, the checkbox displays as undefined. However, it functions properly in enabling my d ...

javascriptjqueryhtmlajaxcheckbox

Modify the chosen item in a dropdown menu (form)

Initially, I have a set of options like the following: <select name="item[type]"> <option value="0" class="dr">First</option> <option value="1" class="dr">Second</option> <option value="2" class="dr">Third&l ...

phphtmlhtml-select

How can I connect a custom Web Resource button in Dynamics CRM 2015 to a specific function within a Javascript Library integrated into the form?

I have added a button to the form using the following code: <button type="button" onclick="btnCalculate_onClick();">test</button> Within the form, I have included a function called btnCalculate_onClick() from a Library named dc_btnAutofillAdd ...

javascripthtmlbuttondynamics-crm-2015

Arrange a table by simply clicking the header of each column using jQuery, all without having to replicate the full table

Looking to implement a table sorting function that only duplicates rows, not the entire table. When the user clicks on a column header, the data in that column should be compared and the rows rearranged accordingly. However, I'm facing some issues wit ...

javascriptjqueryhtml

Tips for Adding Color to an SVG Image Created with Coordinates

For a programming project, I am attempting to assign colors to all the countries in Europe. I have obtained the coordinates for these countries from a Wikipedia page that can be found here. As an example, let's consider Northern Ireland and its corr ...

csshtmlsvgpath