CODEWITHSUNDEEP
javascripthtmlcss
user6725954
user6725954

Reputation:

How to make two images within same class of different size as desired?

I have a class cbImage and for all the images the CSS is fixed 

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

}

Now, my problem is that I dont want all images of same width and height.

How can I change the width and height of different images as desired ?

One image of one 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>

The other 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" />

As you can see both the class has name cbImage.

So the size is getting fixed.

I want the images of both class to have different size.

Also many other CSS are there I cannot just change the name and set the width and height.

Please help.

Upvotes: 1

Views: 504

Answers (2)

Bhavin Shah
Bhavin Shah

Reputation: 2482

try using this.

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

</div>

you have to use inline-css to differentiate your one of the image. As first it will take your inline-css property's value and then it will go for external CSS

Upvotes: 1

Filip Bartoš
Filip Bartoš

Reputation: 301

you can do it this way.

    <img class="example_class">
    <img class="example_class" style="width:60px;height:60px;">

As you can see if you have style there it will listen to style not to class.

Upvotes: 1

Related Questions