What is the best way to adjust the sizes of two images within the same class to your liking?

My class called cbImage has a fixed CSS for all images.

.cbImage img {
  width: 100%;
  height: 100%;

}

However, I don't want all images to have the same width and height.

Is there a way to change the width and height of different images as needed?

For example, one image in a panel:

<div class="cbImage w3">


<div class="panel">

<div class="form">


<div class="login">Recent badges</div>



<span class="fa-stack fa-5x has-badge" data-count="6">

<div class="badgesize">

<img src="images/7.png" width=100, height=100 alt="">



</div>

</span>

</div>

And another image:

  <div class="cbImage active signin agileits">

<form >


<figure class="snip1336">
  <img src="images\44.jpg" alt="sample87" />
  <figcaption>
    <img src="images\ownpic.jpg" alt="profile-sample4" class="profile" />

Both classes have the name cbImage, causing the size to be fixed.

I need the images of both classes to have different sizes.

However, changing the name and adjusting the width and height is not a viable option due to other existing CSS.

Any assistance would be greatly appreciated.

Answer №1

Here is one method to achieve it.

    <img class="sample_class">
    <img class="sample_class" style="width:50px;height:50px;">

Notice that when style is present, it takes precedence over the class attribute.

Answer №2

Give this a shot.

// main container
<div>
  <img class="example_image" src="image_path">
  <img class="example_image" src="image_path" style="width:yourimagewidth; height:yourimageheight;">

</div>

Utilize inline-css to style one of the images. The inline-css property will take precedence over the external CSS.

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

Which is better to use: sql==true or sql===true?

Hey there, could you please take a look at this and thanks in advance! I'm currently working on developing a system for upgrading buildings in my game. I have set up a universal upgrade div that applies to all buildings. When the player clicks on a bu ...

Styling Text with CSS

I am currently using axios to fetch data from my backend. The data consists of a string format similar to "phone number: {enter phone number here}". My goal is to add CSS styling wherever there is a curly brace. let testString = "hello this ...

How to easily update a URL string in Angular 5 router without altering the state of the application

I am working on an Angular 5 application that utilizes the angular router. The majority of my entry route components are placed under a context id, which represents a name in the app store along with other relevant data for that context. Even though the na ...

I am experiencing an issue where the borders of a dropdown menu do not properly wrap around

I'm currently in the process of creating a dropdown menu that will display a list of articles along with the respective authors' images next to them. Initially, I intended to utilize Bootstrap 4's "card" system for this task. However, I enco ...

Adjusting the size of tables in raw JavaScript without altering their positioning

I am attempting to adjust the size of a th element without impacting the position of the next th in the row. Specifically, I want the width of the th to influence the width of the next th accordingly, rather than pushing it to the left. Below is the code ...

What is the best way to declare a variable in order to apply a custom background color to a

I am having trouble getting the conditional background color to apply to the textbox when I set the variable columnstyle. Here is the snippet of HTML code: var columnstyle = "text-align:center;vertical-align:central;background-color:#FFBF00"; ...

Cube area to be filled

I am struggling to fill a cube with colors as it is only getting half of the figure filled. I suspect there might be an issue with the cubeIndices, but I'm having trouble figuring out how to make it fill everything. While I know I could use a cylinder ...

Incorporate the use of OpenLayers into a Vue.js application

Can anyone share their insights on incorporating Openlayers into a Vuejs project? I'm looking to showcase various layers within my Vue app. Thanks in advance! ...

React Native issue: why are my variables resetting mysteriously?

Hey there, I'm currently encountering a peculiar situation involving the usage of var and React.useState() variables. I am utilizing the library https://github.com/tongyy/react-native-draggable#readme to define 2 variables - var color1 = ''; ...

What are some tips for utilizing markers that display location values in the format of a bar chart on Google Maps?

Hey there, I have a project in mind to create a Google map with markers representing specific locations and their values displayed as bar charts. Here is the code snippet from my index page: --index.html-- <!DOCTYPE html> <html> <head ...

Having trouble getting an AjaxBeginForm to function properly within a JQuery script on a PartialView

Within the main controller view, we bring in the partial view utilizing the following code: @Html.Partial("MapPartial", Model) Within the Partial View, I aim to display a map. Currently, there is an Ajax beginform with a submit button that ...

EJS file not displaying stylesheets and images correctly during rendering

I'm currently in the process of building a website, but when I try to render an ejs file (index.ejs), only the HTML portion is displayed without showing any stylesheets, fonts, or images. Here is the code snippet for linking the stylesheets: <!D ...

Initialization of Angular provider $get is missing

Within my 'app.js' file, I have the following code that is used in my config to set up $navigationProvider.doSomething(). When running this code, Test1 and Test3 are alerted correctly, but I'm having trouble with getting my this.$get method ...

Displaying cards horizontally on desktop and vertically on mobile using CSS

Context and Issue I am currently working on this specific page, with a focus on the "Top Artists" section. Desired Outcome: When viewed from a laptop, I aim for the cards to be displayed as vertical rectangles, where the ranking is at the top, followe ...

Transforming the AngularJS $http GET method to OPTION and including custom headers

var users= $resource('http://myapp.herokuapp.com/users', {}); users.get(); The change in the HTTP GET method to OPTION occurred after implementing a header method. var users= $resource('http://myapp.herokuapp.com/users', {}, { get ...

What causes two identical pages to display fonts in different ways?

Two identical pages, hosted on the same server with the exact same Apache configuration and home directory. Each page contains only one sentence of text, unstyled. The strange thing is, when viewed in Chrome and Safari, the fonts render differently, while ...

An unforeseen repetition of jQuery Ajax calls

I'm currently working on an application that utilizes ajax calls to load content. However, I've encountered a situation where an ajax call goes into a loop but seems to end randomly. Below is the code sequence starting from a double click event l ...

Tips for creating the ultimate footer section on your webpage

I'm trying to position the footer div (id="Footer") 10px from the bottom of the screen. Regardless of whether the page content fills the entire height of the screen or creates a scroll area, I want the div to always be at the very bottom with a 10px m ...

How can the @blur event be added to the vue-bootstrap-typeahead in Nuxt/Vue application?

I am facing an issue where I want to trigger a function upon leaving an input field. The input in question is set up using vue-bootstrap-typeahead. Upon inspecting the DOM, I found that the structure of the input element looks like this: <div id="m ...

Trigger Knockout bindings once the ajax request has been completed

In the view, I have the following script: <script> MyObj.initModel(getUrl); $(document).ready(function () { ko.applyBindings(MyObj.viewModel, document.getElementById("someId")); ...