How can I ensure that a bigger sprite image fits inside a smaller div?

I have a unique situation where I am working with a large image sprite that is 1030px by 510px and contains two smaller images, each being 515px by 515px. My goal is to extract the two small images from the sprite and set them as backgrounds for two <img> tags using the following code:

.img-1, .img-2 {
  width: 515px;
  height: 515px;
  background: url(https://i.sstatic.net/aozNS.png) no-repeat;
}

.img-1 {
  background-position: 0px 0px;
}

.img-2 {
  background-position: -515px 0px;
}
<div class="col-sm-6">
  <img class="img-1">
</div>
<div class="col-sm-6">
  <img class="img-2">
</div>

However, I encountered an issue where the two images appear larger than my div containers with the class "col-sm-6". Is there any way to make the small images fit within the divs without changing their size to be larger (e.g., changing to "col-sm-7")?

htmlcss

Answer №1

By setting specific pixel width and height for images, you can control the exact space they occupy. Bootstrap columns are responsive and adjust their size based on the specified column number (e.g., col-6 or col-4).

If I understand your issue correctly, it seems like you need to remove the 512px width and height CSS properties from the image and instead use width: 100%. This will allow the image to adjust its width to fit the container, with the height adjusting accordingly.

[EDIT] - Actually, that approach only works if the image is loaded using src rather than the CSS background property. You may want to consider using src loading instead. If you must stick with this method, you could either keep a fixed small size as suggested in another answer or explore options like flexbox for more adaptability in image sizes.

Answer №2

To display two images properly, you must adjust the background-size to 200% and define the background-position in percentage values:

.image-1, .image-2 {
  width: 100px;
  height: 100px;
  background: url(https://example.com/image.png) no-repeat;
  background-size: 200%;
}

.image-1 {
  background-position: 0 0;
}

.image-2 {
  background-position: 100% 0;
}
<div class="col-sm-6">
  <img class="image-1">
</div>
<div class="col-sm-6">
  <img class="image-2">
</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

Having difficulty extracting images from a collection - web scraping struggle

I have a basic understanding of web scraping but I am facing an issue. I am using PHP Simple HTML DOM and struggling to extract images from within each 'li' tag. <ul class="slides"> <li> <img src="www.webpage.com/oH7oCOEhQAB ...

phphtmldomweb-scraping

Show information in tooltips across several rows

Within my Vue.js component, I am attempting to craft a custom tooltip text that consists of multiple lines. <div class="toolTip"> Shift ('+i+') </div> <div class="hide"> <div class="w-full"&g ...

htmlcssvue.jstailwind-css

Ever thought about harnessing the power of SassDoc to create detailed documentation for your sass

After experimenting with sassdoc for documenting our sass mixins and functions, I realized that there doesn't seem to be a straightforward way to generate documentation for our sass variables. Specifically, I am looking for a solution that can output ...

cssnode.jsnpmsassgulp

How can I customize the appearance of the arrow in a Material UI tooltip?

Looking to enhance the appearance of a Material UI tooltip arrow with custom styling, but struggling to set the border and background colors. Here's the current configuration in React: const useStylesBootstrap = makeStyles(theme => ({ arrow: { ...

cssreactjsmaterial-ui

Exploring the power of colors in Tailwind CSS and Material UI for your CSS/SCSS styling

Discovering unique color palettes like the Tailwind Color for Tailwind CSS and theMaterial UI colors has been inspiring. These collections offer a range of beautifully named colors from 100 to 900 and A100 to A400, reminiscent of font styles. I am intrig ...

csssassmaterial-uimaterializetailwind-css

Is there a way to remove a specific row from both an HTML table and a MySQL database using CodeIgniter?

Just diving into CodeIgniter and successfully retrieved data from MySQL to display in an HTML table. Now, the challenge is to delete specific rows in MySQL. Imagine a scenario where there are 10 rows in the table, each accompanied by a checkbox, and a Del ...

phphtmlmysqlformscodeigniter

Display a list of personalized post types and emphasize the item that is currently being viewed

I've created a unique type of post called 'product'. Every product page has a sidebar listing all products, with the current product displayed in bold text. For instance, when viewing product 3, it should appear like this: Sidebar Pr ...

phpcsswordpress

Show variously colored information for each selection from the dropdown using Angular Material

I am trying to change the color of displayed content based on user selection in an Angular application. Specifically, when a user chooses an option from a dropdown list, I want the displayed text to reflect their choice by changing colors. For example, i ...

cssangulartypescriptangular-material

Why do certain list items on my page have a gap between their border and content?

I recently encountered an issue with my list of items and their styling. Each list item contains an anchor element with a gray background, while the item itself has a gradient bottom border. However, I noticed that in some cases, there was a white line ap ...

htmlcss

I encountered an error message that said: "Cannot assign '12': 'Cart.product' must be a 'Product' instance. Can someone please assist me in resolving this problem?"

[Included in the image of my code is the add-to-cart function where the error can be found on line 5] def add_to_cart(request): user = request.user product_id = request.GET.get('prod_id') product = Product.objects.get(id=product_id) ...

htmldjango

Ways to retrieve HTML tags from a website's DOM and shadowDOM

I am currently working on a project using NodeJS where I need to extract the HTML structure of multiple websites. However, I am facing some challenges with this task. My goal is to retrieve only the HTML structure of the document without any content. It is ...

javascripthtmldomshadow-domtreewalker

What is the best way to save a JavaScript object or JSON within an HTML element using the HTML5 data attribute?

I have an anchor element and I want to store and retrieve the object within it in this specific format. <a id ="test" data-val="{key1:val1,key1:val1}"> </a> When saved in this manner, fetching it with $("#test").data('val') returns ...

javascriptjqueryjsonhtml

Using JavaScript values retrieved from a database to dynamically adjust the options in the second dropdown menu based on the selection made in the

I am currently working on a feature that involves populating two dropdown menus with values from a database. The idea is that when an option is selected in the first dropdown, the second dropdown should dynamically display relevant values based on that s ...

javascripthtml

Dynamic addition of CSS classes to HTML elements using PHP

I'm working on developing an application that includes multiple courses. Each course is completed over a certain number of days, such as 14 days or 20 days. To visually track progress, I've implemented a step progress bar that looks like this:htt ...

javascriptphpcsslaravellaravel-blade

Carousel-item height in Bootstrap 4.6

I am facing an issue with a component in Angular 14 using Bootstrap v4.6: <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div cl ...

cssangularbootstrap-4carousel

Tips for downsizing a large image to fit into a smaller area

I am working on a page layout that features a small circular navigation element. However, I am facing an issue with fitting a large picture within the boundaries of this small circle without it overflowing and causing alignment problems. Does anyone have ...

javascriptjqueryhtmlcss

Out of the blue div, could you lend your assistance?

I have a code that displays 5 random images with corresponding text. My challenge is that I want to separate the text into another div so that I can add another function to it, while still keeping the images random with their corresponding text. <scr ...

javascripthtmlcss

Combining CSS and HTML with IE10

With the release of Windows8 and IE10 as developer previews, I am curious about what features IE10 does not support that IE9/8 did, as well as what new features it now supports. Thank you for your assistance! ...

htmlcssinternet-explorer-10

Is there a way to design a form that appears as though it's levitating above a div element?

I am new to web development and currently practicing by converting PSD designs into HTML pages. I am facing an issue where I need to create a form that appears to be floating on top of a div, with the form being taller than the div itself. Here is an illu ...

javascripthtmltwitter-bootstrapbootstrap-5

What is the best way to retrieve and display data from a JSON object that has been encoded using json_encode on one page.php, in another page.php?

I have a specific requirement that involves calling JSON data from one PHP page and displaying it on another PHP page. Can someone guide me on how to achieve this? Below is the JSON code that I need to retrieve: <?php include("Connect.php"); $Db = m ...

phpjqueryhtmlajaxjson