When applying a maximum width of 100% with automatic height, images may become cropped

I'm a beginner in learning CSS, and since my technical skills are limited, I'll try to keep things simple. Currently, I have an image taking up half of the screen with the following CSS code that I found after reading some articles:

<div class="div-block-87">
  <img src="image.jpg" alt="">
</div>

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
  height: auto;
}

The issue I'm facing is that the image gets cut off like this:

However, when I inspect the image, it appears as expected, see below:

I apologize if my explanation isn't clear, but I'm trying my best to describe the situation.

htmlcss

Answer №1

To achieve a responsive image with proper sizing, consider using object-fit: cover.

If you also want to specify the position of the image within its container, you can utilize object-position: center center.

Keep in mind that these CSS attributes may not be supported in older web browsers.

If you require compatibility with older browsers, an alternative approach is to use a div element instead of an img tag and style its background properties accordingly (image, position, size, fitting).

Check out this demo for a visual example.

Answer №2

To create a grid with two equal columns, each set to 1fr, and have it take up 100% of the visible viewport, you'll need to ensure the image within has a max-width property to fit nicely without exceeding the container's boundaries.

* {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
}

.div-block-87 img {
  max-width: 100%;
}
<div class="container">
  <div class="div-block-87">
   <img src="https://images.unsplash.com/photo-1625756939748-c9c745e105cf">
  </div>
  <div class="div-block-88">other block</div>
</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

The burger icon in the navigation bar is malfunctioning, showing just a single horizontal line instead

I've been working on creating a responsive layout button that resembles the following design: https://i.sstatic.net/v5vDd.png However, I've encountered an issue where I can't seem to generate all three horizontal lines, only one of them. T ...

htmlcssbootstrap-4navbar

Troubleshooting the non-functioning addEventListener in JavaScript

I am facing an issue where a function that should be triggered by a click event is not working and the console.log message does not appear <script src="e-com.js" async></script> This is how I included the javascript file in the head ...

javascripthtml

Values do not appear as expected post PDF conversion using wkhtmltopdf

Currently, I am updating certain values within my HTML page by following this process: The function: function modifyContent(){ var newTitle = document.getElementById('myTextField1').value; if( newTitle.length==0 ){ alert('Plea ...

javascriptphphtmlpdfwkhtmltopdf

Ensure that all of the <li> elements within a <ul> container have equal widths

I've been grappling with this problem for the past day, and despite restarting from scratch multiple times, I can't seem to make a horizontal CSS flyout header function as intended. The dropdown section should expand to fit the content width (id ...

htmlcss

After making a POST request, the `Req.body` is assigned to

This is the JavaScript code I am using: app.use(express.static(__dirname)); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); // support json encoded bodies app.get('/', function(req, res){ res.sendFile(__dirn ...

javascripthtmlnode.jsexpresspost

What is the best way to arrange card-columns in a horizontal order?

My smart-scrolling list of cards uses the card-columns style, but I find it frustrating that they are ordered top to bottom like this: 1 4 7 2 5 8 3 6 9 This vertical ordering becomes impractical when dealing with a large number of items. When I have 50 ...

csstwitter-bootstrapbootstrap-4

What is the best way to align the logo image to the left side of the Material UI app bar without any gaps?

Currently, I am working on a material UI app bar to serve as my navigation bar. The issue I am encountering involves the logo image on the left side of the page having excessive spacing from the edge, as shown in the image below. I've tried adjusting ...

cssreactjsmaterial-ui

Issue with displaying multiple checkboxes using Materialize CSS in combination with Leaflet for web-mapping overlays

I'm currently using Materialize 0.97.7 along with Leaflet 1.0.1 (the latest version). <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet-src.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com ...

javascriptcssleafletmaterialize

What is the best way to invoke functions with input of type 'number'?

As someone new to HTML, I have an input field with type=number: <input type="number" min="1" value="1" id="amount-input" (click)="chooseStanding(standingspot.priceCategory)"> When the (click) event i ...

javascripthtml

selection menu and advancement gauge

While working on my code, I have a task where I need to make the progress bar move a specific amount when a name is clicked based on the option's value. <!DOCTYPE html> <html> <head> <title>testinggg</title> &l ...

javascriptjqueryhtmlcss

Creating a Bootstrap layout with columns of varying heights

My current setup looks like this: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content&l ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

What is the best method to override the CSS transition effect with JavaScript?

I am trying to implement a CSS transition where I need to reset the width of my box in advance every time my function is called. Simply setting the width of the box to zero makes the element shrink with animation, but I want to reset it without any animati ...

javascriptcsstransition

Are you curious about the array of elements in React's carousel?

I'm currently in the process of constructing a website using React, and I have a specific challenge related to the "news" section. Within this section, I have a list of three components that represent different news items. These components are housed ...

javascriptcssreactjsnpmreact-router

Retrieve data from an ASP.NET Web API endpoint utilizing AngularJS for seamless file extraction

In my project using Angular JS, I have an anchor tag (<a>) that triggers an HTTP request to a WebAPI method. This method returns a file. Now, my goal is to ensure that the file is downloaded to the user's device once the request is successful. ...

c#javascripthtmlangularjsasp.net-web-api

On smaller screens, the top placement of right sidebar links is necessary

Our website layout is organized into 3 main sections: the top part contains the main menu, followed by the main content and a sidebar specific to each page. The main content and sidebar are structured using bootstrap col-* classes. On small screens, I en ...

javascripthtmlcssbootstrap-4

New post: The vue component that was released lacks CSS (NPM)

For the first time, I am releasing a Vue component on NPM and everything seems to be in order, except for one issue - the CSS is missing. While it functions perfectly when tested locally, after installing the npm package in a test project and importing the ...

cssvue.jsnpm

What is the best way to transfer form data stored locally to a Django view and then store it in the database?

Is there a way to transfer form data from an offline website to a Django view for database storage? I want to fill out a form, save it in local storage, and then upload the data to the database when I reconnect to the internet. Is there a tutorial or can ...

jquerypythonajaxdjangohtml

Creating a CSS grid with uniform row heights, each adjusting independently

I'm currently working on creating a CSS grid for a product display. My goal is to have rows with equal heights, but each row should adjust its height based on the tallest column within that specific row. Right now I have all rows set to be the same he ...

csscss-grid

Having trouble displaying dynamically added images in my jsx-react component. The images are not showing up as expected

import React from "react"; import ReactDOM from "react-dom"; var bImg = prompt("Enter the URL of the image you want to set as the background:"); const bStyle = { backgroundImage: "url(bImg)"; // The link is stored ...

javascriptcssreactjsjsx

Issues with implementing a Bootstrap dropdown list in a Django HTML template

I'm having trouble implementing Bootstrap in my Django project's shared HTML file. The dropdown list isn't functioning properly despite trying various approaches, including using CDN and local Bootstrap files. When I click on the dropdown li ...

pythonhtmldjangodjango-templatesbootstrap-5