Utilize the CSS content property to embed an image without causing it to distort in size

Struggling to swap out one image for another without stretching it? In my demo, I replaced an elephant with a lion using only CSS - no changes allowed to the HTML. Unfortunately, the lion image ends up stretched. Even adding background-size: cover doesn't help. Any ideas on how to keep the lion image from stretching without altering the div or image height, maybe using something similar to background-size: cover? Appreciate any guidance.

div {
  width: 300px;
  height: 400px;
  background: lightgreen;
}
img {
  width: 100%;
  height: 400px;
content: url(https://c81s22ku6ih1er8af18cv13c-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Lion.jpg);
}
<div>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudlp3slhvMcKABuQ3hqSbMiBQVUO7nYlDgw_-oj2dUzQ84SEw' />
</div>

htmlcss

Answer №1

If you want to adjust the size of an image, you can utilize the object-fit: cover property.

div {
  width: 300px;
  height: 400px;
  background: lightgreen;
}

img {
  width: 100%;
  height: 400px;
  content: url(https://c81s22ku6ih1er8af18cv13c-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Lion.jpg);
  object-fit: cover;
}
<div>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudlp3slhvMcKABuQ3hqSbMiBQVUO7nYlDgw_-oj2dUzQ84SEw' />
</div>

Answer №2

Why not try using % instead of px for your measurements? Additionally, adding margin: 0; to the body could eliminate the white spaces around the image.

div {
  width: 100%;
  height: 100%;
  background: lightgreen;
}
img {
  width: 100%;
  height: 100%;
content: url(https://c81s22ku6ih1er8af18cv13c-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Lion.jpg);
}
body {
margin: 0;
}
<div>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudlp3slhvMcKABuQ3hqSbMiBQVUO7nYlDgw_-oj2dUzQ84SEw' />
</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

Steps for aligning an image and text within an icon next to each other

I'm looking to align a small PNG image next to some text within an icon. How can I achieve this? Currently, they are stacked vertically. Here is the current layout - I want the two elements side by side instead. The structure of the division is unique ...

javascriptcssfrontend

Steps to update the action attribute in a form element upon clicking a button

Within the following code snippet, there are 3 buttons - update, back, and delete. Depending on which button is clicked, the $page variable should be assigned to the action attribute in the form element, with the posted data being sent accordingly. <f ...

phphtml

Customizing Material UI Select for background and focus colors

I am looking to customize the appearance of the select component by changing the background color to "grey", as well as adjusting the label and border colors from blue to a different color when clicking on the select box. Can anyone assist me with this? B ...

javascriptcssreactjstypescriptmaterial-ui

Tips for inserting a personalized image or icon into the ANTD Design menu

Can anyone help me figure out how to replace the default icons with a custom image or icon in this example: https://ant.design/components/layout/#components-layout-demo-side I attempted to do it by including the following code: <Menu.Item to="/" key=" ...

javascriptcssreactjsantd

Unique border-bottom width measurements available

Seeking assistance with a design challenge, further details are available in the screenshot I've provided. I am attempting to apply a unique border bottom style to or text, with specific width specifications that do not span the entire word length. ...

htmlcss

Is it possible to enable auto-completion for IDs in a separate CSS file using WebStorm 7?

I am new to using WebStorm 7 and currently working on building a simple HTML/CSS website. Initially, I included my CSS within the HTML file using the style tag, but now I have decided to move it to a separate file. Auto completion is functioning for all h ...

htmlcsswebstorm

What is the default margin for Autocomplete in Material UI?

Having just started with material-ui, I'm having trouble figuring out the margins of the Autocomplete. My form includes both Autocomplete and TextInput elements, but their positioning seems off to me. Is there some predefined margin box around Autocom ...

htmlcssreactjsautocompletematerial-ui

emphasizing the specific text being searched for within the page

Looking for a solution to search values and highlight matching text words on a page? Let me help you with that. $(function() { var tabLinks = $('.nav > li'), tabsContent = $('.tab-content > div'), ...

javascriptjqueryhtmlhighlight

An HTML form containing various input fields organized as a JSON string

I need to pass two parameters, param1 and param2, to a servlet. Param1 should be in JSON format, while param2 is a regular input value. param1 = {"id":"userid","name":"username","status":"userstatus"} param2 = add How can I accomplish this using the HTM ...

htmljsonservlets

What causes an asynchronous function to exhibit different behavior when utilized in conjunction with addEventListener versus when manually invoked?

I was delving into the concepts of async and await keywords and decided to create a basic demonstration using an HTML file and a corresponding JS file. In my example, I defined two promises - promise1 and promise2. The handlePromises function uses async/ ...

javascripthtmlasynchronous

Issue with Semantic-UI Special PopUp not displaying on screen

I'm currently working on creating a unique pop-up feature using custom HTML, with the intention of adding content to it later on. My console is displaying the following message: Popup: No visible position could be found for the popup. $(document) ...

javascriptjqueryhtmlsemantic-ui

The background color of the body is being utilized by Div in Internet Explorer version 7

Within my HTML document, I have created a container div that holds several nested divs for a slideshow effect. This "container" div is positioned over the background image of the body element. The CSS styling for the body element is as follows: body { ba ...

csshtmlinternet-explorer-7background-color

Is it possible to implement a hover animation within another hover animation in WordPress?

Trying to incorporate two hover animations for the images in my photo galleries. When hovering over an image, I want a text to appear in a black overlay, and then when hovering over that text, it should become underlined. Looking for something similar to ...

htmlcsswordpressclasshover

"Implementing a 960 Grid System with an HTML5 Header Element

Exploring 960.gs and HTML5 as a beginner has led to some challenges. My current project involves an image spanning 2 grid units, followed by a div taking up 5 units on the same line, with a line break needed before displaying a heading. I attempted the la ...

csshtml960.gs

Transmit HTML message using the "textarea" tag through email

Whenever I try to send the content of my "textarea" via email, it always ends up being sent as a blank message. How can I fix this issue? Below is my PHP code: <?php $input = json_decode(file_get_contents("php://input"), true); $ToEmail = "<a href ...

javascriptphphtmljson

javascript guide to dynamically update the glyphicon based on value changes

I am attempting to implement an optimal level feature where a glyphicon arrow-up will be displayed if a value falls within the optimum range, and it will switch to a glyphicon arrow-down if the value is lower. <div class="card-body" ng-repeat="item i ...

javascripthtmlangularjsglyphicons

Is it possible to exclusively target a child div using JavaScript in CSS, without affecting the parent div?

I'm in the process of developing a calendar feature where users can select a specific "day" element to access a dropdown menu for time selection. The functionality is working fine, but I've encountered an issue. When a user selects a time from th ...

javascripthtmlcss

Utilizing the <style scoped> feature within my Angular template

When adding CSS styles in the specified htm file's templateUrl while loading a directive, I wonder if this is a bad idea. Will it be repeated every time the template is instantiated on the rendered page, or does Angular handle this differently? By usi ...

javascriptcssangularjs

Getting the value of a JavaScript variable and storing it in a Python variable within a Python-CGI script

Is there a way to capture the value of a JavaScript variable and store it in a Python variable? I have a Python-CGI script that generates a selection box where the user can choose an option from a list. I want to then take this selected value and save it ...

javascriptpythonhtmlcgi

Is the absolute positioned element on the left or right based on its current location?

Is there a way to assign absolute positioning with left at 0px or right at 0px depending on whether the positioned div will go outside of its container? For example, when you right click in a browser and see the menu appear to the right of where you click ...

javascriptjqueryhtmlcssabsolute