Как создать два изображения в одном классе разного размера по желанию?

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть класс cbImage , и для всех изображений CSS исправлен

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

}  

Теперь моя проблема в том, что я не хочу, чтобы все изображения имели одинаковую ширину и высоту.

Как я могу изменить ширину и высоту разных изображений по желанию?

Одно изображение одной панели:

 <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>  

Другое изображение:

   <div class="cbImage active signin agileits">

		<form >


			<figure class="snip1336">
		  <img src="images44.jpg" alt="sample87" />
		  <figcaption>
		    <img src="imagesownpic.jpg" alt="profile-sample4" class="profile" />  

Как вы можете видеть, у обоих классов есть имя cbImage .

Таким образом, размер становится фиксированным.

Я хочу, чтобы изображения обоих классов имели разный размер.

Также есть много других CSS, я не могу просто изменить имя и установить ширину и высоту.

Пожалуйста, помогите.

Ответ №1:

вы можете сделать это таким образом.

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

Как вы можете видеть, если у вас есть style, он будет прослушивать style, а не class.

Ответ №2:

попробуйте использовать это.

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

</div>
  

вы должны использовать встроенный css, чтобы отличить свое изображение от изображения. Сначала он примет значение вашего встроенного свойства CSS, а затем перейдет к внешнему CSS