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

"Interactive Connect 4 Game in Javascript - Drop the disk into the bottom row of the chosen

Check out this awesome Connect4 game I found: http://codepen.io/anon/pen/lmFJf I have a specific goal in mind for the game. When I click on an empty space in any column, I want it to automatically drop into the lowest available spot in that column, follow ...

javascripthtmlcss

Stop header background image from loading on mobile browsers by utilizing the <picture> tag

Is there a method to utilize the <picture> element in order to prevent a page from downloading an image when viewed on a mobile phone? I have a website that features a header image. Unfortunately, due to the site's functionality, using CSS (bac ...

htmlcssimage

Sending input values to controller action parameters in CakePHP

I am working on an HTML form in which I need the URL output to be structured as follows: "example.com/mycontroller/action/mike/apple" Upon submitting the form using "post" method, the form values are not visible and can only be accessed through "_POST" ...

phphtmlcakephpcakephp-2.0forms

What is the process for displaying a PHP array in HTML5 audio and video players?

I am currently working with two PHP arrays. The first array, array "a," contains strings that represent paths for MP3 files on the server. The second array, array "b," contains strings representing paths for MP4 files. For example: $test = 'a.mp3&ap ...

javascriptphparraysjsonhtml

Understanding page navigation in PHP

Is there a way to validate the inputs on a given page, display error messages if any, and then move to the next page if the inputs are correct? How can this be achieved? <html> <head></head> <body> <?php // define variables an ...

phphtmlvalidationnavigation

Creating a seamless scrolling experience with a designated stopping point - here's how to achieve it!

I understand how to implement a scroll effect on an element with a specific class or ID. However, I am unsure of how to make the scrolling stop 20px above that element. I have seen examples using document.getElementById() to achieve this: function scr ...

javascripthtml

How can one retrieve elements from a loaded webpage?

I've been using the jQuery function .load() to load a page and I'm trying to find a way to access HTML elements within the loaded page from the source page once it's finished loading. The only method I've come across so far is to add pa ...

jqueryhtml

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Having created an HTML page with a form, my goal is to capture user input and store it in a JSON file. However, I've run into some confusion... In the process, I utilized the express module to set up a server. My mind is juggling concepts such as AJA ...

javascripthtmljsonnode.jsajax

Is there a way to transition an element from a fixed layout position to an absolute layout position through animation?

I am looking to create a dynamic animation effect for a button within a form. The goal is for the button to move to the center of the form, while simultaneously undergoing a horizontal flip using a scale transform. During the midpoint of this animation, I ...

javascriptjqueryhtmlcss

Utilize Node JS to assign variables to HTML form inputs

Can anyone help me with storing HTML form inputs in variables using Node JS? I'm having trouble getting it to work properly. Below is the HTML form snippet: <form action="localhost:8080/api/aa" method="post"> <input id="host" type="text ...

javascripthtmlnode.jsexpress

Incorporating fresh CSS styles through Selenium

I am attempting to showcase all the prices available on this page using Selenium and Chrome in order to capture a screenshot. By default, only 3 prices are visible. Is there a way to disable the slick-slider so that all 5 prices can be seen? I have tried r ...

pythoncssseleniumweb-scrapingslick.js

Necessary Selection from Dropdown

I've created a contact form with both optional and required fields. One of the mandatory fields is a drop-down menu, which looks like this: <div> <select name="favFruit[]" size="1" required> <option value="apple">Apple&l ...

jqueryhtmljquery-validateselectlist

issue with padding-bottom in Firefox and Internet Explorer 11

JsFiddle CSS body, html { background: violet } * { margin: 0; padding: 0 } .fixed { height: 100%; width: 300px; background: #fff; right: 0; position: absolute; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; ...

htmlcssfirefoxflexboxcross-browser

Struggling to implement a vertical scroll bar in HTML code?

<body ng-app="myApp" ng-controller="myCtrl"> <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" > <div class="tittle" style="width: 25%;"> <a href="" ng-click="showDi ...

javascripthtmlcssangularjs

Concealing anchor and span elements using CSS in Internet Explorer 7

I decided to simplify things by creating a style within the document to address my specific issue. The problem I encountered involves a row of 4 links that are designed to resemble buttons. I have chosen to hide the Next link (the 3rd item) using CSS. Whil ...

css

The elements with identical IDs are being superimposed

There are two div elements on my webpage, both assigned the "nav" class. Below is the CSS code: .nav { border-radius: 1em; background-color: #0000BB; color: white; padding: 1em; position: absolute;//Fits size to content. margin: 1em; left: 50%; ...

htmlcssposition

The CSS selector within the website's URL

When a URL like www.example.com/#signup is entered, the browser focuses its view on the HTML element with the ID signup. Is this correct? Can the CSS style of the element be changed if it is focused in this way? For example, if there is a div element wit ...

htmlcssurlcss-selectors

Modifying CSS styles in real-time according to the present data

Is there a way to dynamically change CSS values based on current CSS values? For example, instead of explicitly setting different values like this: .test{ margin-top:100px; } .test:hover{ margin-top:90px; } Is it possible to achieve the same eff ...

css

Get the large data file in sections

I ran a test script that looks like this: async function testDownload() { try{ var urls = ['https://localhost:54373/analyzer/test1','https://localhost:54373/analyzer/test2'] var fullFile = new Blob(); for (le ...

javascripthtml

Is there a way to add a <video> tag in tinymce editor without it being switched to an <img /> tag?

I am attempting to include a <video> tag within the tinymce editor, but it keeps changing it to an <img> tag. Is there a way to prevent this conversion and keep the <video> tag intact? I want to enable videos to play inside tinymce whil ...

javascripthtmltinymce-4