Steps to insert a large image into a div while maintaining the size ratio

https://i.sstatic.net/WvBbF.png

I'm struggling to add a logo to the right corner of this div

The logo size is too big and it doesn't adjust properly to the existing div height and width

Below is the code I've tried, but the image is ruining the style:

https://i.sstatic.net/8ayIk.png

here is my code

<div style="border: solid;">
                <div>
                    <%--<img src="Images/logo.png" />--%>
                </div>
                <div style="display: flex; width: 100%;">
                    <div>
                        <asp:RadioButtonList ID="rdx1" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Selected="True">Apple</asp:ListItem>
                            <asp:ListItem>Banana</asp:ListItem>
                            <asp:ListItem>Peach</asp:ListItem>
                            <asp:ListItem>Lemon</asp:ListItem>
                        </asp:RadioButtonList>
                    </div>
                    <div style="background-color: aqua; display: flex; flex: 1;">
                        <asp:TextBox runat="server" ID="txtRepText" Placeholder="Search Text" Width="100%" ></asp:TextBox>
                    </div>
                    <div>
                        <asp:Button ID="btn2" runat="server" Text="Search"  Font-Bold="true" />
                    </div>
                </div>
                <hr />
                <div>
                    <asp:CheckBox ID="cbx3" runat="server" Checked="true" Text="Red" />
                    <asp:CheckBox ID="cbx4" runat="server" Checked="true" Text="Yellow" />
                    <asp:CheckBox ID="cbx5" runat="server" Checked="true" Text="Green" />
                    <asp:CheckBox ID="cbx6" runat="server" Checked="true" Text="Blue" />
                    <asp:CheckBox ID="cbx7" runat="server" Checked="true" Text="Brown" />
                    <asp:CheckBox ID="cbx8" runat="server" Checked="true" Text="Pink" />
                </div>
            </div>
            <div>More controls</div>

</div>

Does anyone know a solution for this issue?

Answer №1

Here is a modified version of the code:

<div style="border: solid;width:100%;height:70px;border-width:1px;">
    <div style="width:70px;height:100%;float:left;">
        <image src="https://www.bubbleslearn.ir/wp-content/uploads/2020/01/bubbles.png" width="100%" height="100%" />
    </div>
    <div style="width:100%;height:10%;">
        <div style="float:left; width:40%;">
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label>
            <input type="radio" id="other" name="gender" value="other">
            <label for="other">Other</label>
        </div>
        <div style="background-color:green;float:left;width:50%">
            <input type="text" style="width:100%" value="Search">
        </div>
        <div style="float:right;">
            <input type="button" value="Search">
        </div>
        <br>
        <hr />
        <div style="width:80%;float:left;">
            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
            <label for="vehicle1"> I have a bike</label>
            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
            <label for="vehicle1"> I have a bike</label>
            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
            <label for="vehicle1"> I have a bike</label>
        </div>
    </div>

I have made adjustments to the code to address the div tag issues and ensure responsiveness for smartphones.

Please review the updated code for any further improvements.

Answer №2

This code snippet may not display correctly on StackOverflow, but give this a try:

.asmgx {
  display: inline-block;
  position: relative;
  width: 10%;
  height: 10%;
}
    <div style="border: solid;">
                    <div>
                        <%--<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" class="asmgx"/>--%>
                    </div>
                    <div style="display: flex; width: 100%;">
                        <div>
                            <asp:RadioButtonList ID="rdx1" runat="server" RepeatDirection="Horizontal">
                                <asp:ListItem Selected="True">Apple</asp:ListItem>
                                <asp:ListItem>Banana</asp:ListItem>
                                <asp:ListItem>Peach</asp:ListItem>
                                <asp:ListItem>Lemon</asp:ListItem>
                            </asp:RadioButtonList>
                        </div>
                        <div style="background-color: aqua; display: flex; flex: 1;">
                            <asp:TextBox runat="server" ID="txtRepText" Placeholder="Search Text" Width="100%" ></asp:TextBox>
                        </div>
                        <div>
                            <asp:Button ID="btn2" runat="server" Text="Search"  Font-Bold="true" />
                        </div>
                    </div>
                    <hr />
                    <div>
                        <asp:CheckBox ID="cbx3" runat="server" Checked="true" Text="Red" />
                        <asp:CheckBox ID="cbx4" runat="server" Checked="true" Text="Yellow" />
                        <asp:CheckBox ID="cbx5" runat="server" Checked="true" Text="Green" />
                        <asp:CheckBox ID="cbx6" runat="server" Checked="true" Text="Blue" />
                        <asp:CheckBox ID="cbx7" runat="server" Checked="true" Text="Brown" />
                        <asp:CheckBox ID="cbx8" runat="server" Checked="true" Text="Pink" />
                    </div>
                </div>
                <div>Additional controls</div>
    
    </div>

Answer №3

The most efficient method to achieve this is by utilizing flexbox for positioning and object-fit for the image. Take a look at the code snippet below:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .wrapper{
      width: 120px;
      height: 120px;
    }
    .image{
      width: 100%;
      object-fit: cover;
    }
    .header{
      height: 200px;
      background-color: #ccc;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  </style>
</head>
<body>
  <header class="header">
<div class="wrapper">
  <img class="image" src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg" alt="">
</div>
  </header>
</body>
</html>

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

Tips on transforming button-controlled tab pages in Bootstrap 2 to Bootstrap 3

I am currently in the process of upgrading my website from Bootstrap 2 to Bootstrap 3, and I have encountered an issue with a specific control that consists of multiple sets of tab pages controlled by toggle buttons. Here is an example of the functional c ...

Tips for ensuring that images fully occupy my carousel slides

I am struggling to make my images fit properly within the slides. Here is the code snippet I have tried along with some screenshots: <div className="relative h-24 w-20 sm:h-44 sm:w-100 md:h-44 md:w-60 flex-shrink-0"> <Carousel showThu ...

What is the best way to preserve the allocated space in the DOM while utilizing CSS display:none?

I have explored the functionalities of display:none and visibility:hidden. However, I need to utilize display:none for a specific reason while still preserving the element's allocated space in the DOM to prevent any impact on adjacent elements. Is thi ...

Ways to utilize jquery to limit the length of an editable div and prevent it from exceeding our specified restriction

Imagine a scenario where you have the following code snippet: <div id="editing" contenteditable onclick="document.execCommand('selectAll',false,null)">Put text here...</div> In this situation, let's say you want to impose a r ...

Create paper "cut" borders using HTML canvas or pseudo-elements

As a designer with a penchant for pain, I am striving to achieve an "art nouveau" aesthetic on paper for my NextJS project with MUI as the main design solution. Despite the abundance of CSS in the background, I am faced with the challenge of creating inner ...

`The Best Times to Utilize Various Image Formats Within a Single Webpage`

If I have two identical images displayed on a page at different sizes, what is the best option for optimizing performance? On one hand, using an image already sized correctly can improve performance, especially on mobile devices. On the other hand, using t ...

Retrieve all data points if both latitude and longitude are present in the XML dataset

XML data to retrieve details <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <results> <result> <Country_Code>IN</Country_Code> <Country_Name>India</Country_Name> <Region_Nam ...

Is there a way to make the Sweetalert2 alert appear just one time?

Here's my question - can sweetalert2 be set to only appear once per page? So that it remembers if it has already shown the alert. Swal.fire({ title: 'Do you want to save the changes?', showDenyButton: true, showCancelButton: true, ...

Discreet elements are not functioning

It's frustrating that everything in the 'wrapper' won't stretch to fit properly, instead staying at a fixed height. I'm trying to make the 'sidebar' and 'content' inside the area have the same height at all time ...

Customize your Bootstrap 4 accordion cards with added margin and a sleek design without the usual bottom

After incorporating Bootstrap's accordion component, I made a custom adjustment by including spacing between the cards to achieve this layout (the - and + symbols were my addition and not important here): https://i.stack.imgur.com/5nRrP.png However, ...

What causes the website to malfunction when I refresh the page?

I utilized a Fuse template to construct my angular project. However, upon reloading the page, I encountered broken website elements. The error message displayed is as follows: Server Error 404 - File or directory not found. The resource you are looking fo ...

Can a fixed div be made to adapt to different screen sizes?

Struggling to make SVG data charts responsive due to the 'position:fixed' CSS attribute applied, I'm exploring alternative solutions that don't involve media queries. Ideally, I want the SVG to scale up and down while remaining centered ...

The Bootstrap row snag causing text display issues

There seems to be a glitch when the first column has more text than the one next to it. Check out the screenshot provided for reference. Any suggestions on how to fix this issue in Bootstrap? https://i.sstatic.net/fSq68.png Live Demo: https://jsfiddle. ...

Do you want your image to appear visually pleasing on all screen sizes?

Currently, I am working on a mobile website and encountering an issue with the image banner. For tablets, it should look like this: However, when viewed on mobile, it needs to appear as follows: This is the code I have implemented so far: <div class ...

Is there a way to repurpose a function to work with both ids and classes?

My current code is affecting all elements instead of just the intended one. I've experimented with classes and ids, ruling out those as potential issues. I'm hoping for my JavaScript to target only the selected element, not all of them. Check ou ...

How to align an unordered list horizontally in HTML without knowing the number of items

I'm currently developing a web page that needs to display an unknown number of items using the ul/li HTML tag. Here are my requirements: The list should utilize as much horizontal space as possible The list must be horizontally centered, even if lin ...

JavaScript/jQuery Tutorial: Accessing the src attribute of images sharing a common class名

How can I extract the src values of images with the same class and display them in an empty div? For instance: <body> <img class="class1" src="http://www.mysite.com/img/image1.jpg" width="168" height="168" alt=""> <img class="class ...

Ensure to preselect the radio button based on the Day's value

I have set up my Radio buttons with corresponding content to be displayed when clicked. I want to automatically pre-select the tab button based on the current day. For example, if today is Sunday, the page should load showing the contents for Sunday. If i ...

Tips for positioning buttons in a circular arrangement around an image

I am having trouble creating a responsive menu around a circular image. When the screen resolution changes, the buttons do not stay aligned next to the circle picture and their position shifts. How can I ensure that these image buttons stay aligned with th ...

setting a div element to occupy a percentage of the window's height using viewport height units (vh) within the Wordpress platform

this is the desired appearance but upon pasting the identical code: <!-- placeholder div --> <div style="height:100px;"> </div> <!-- outer container div (with specified height) --> <div style="height:80vh;"& ...