Bootstrap 4卡片内图片尺寸过大，自定义CSS无法缩小的问题咨询

Hey there! Let's get that image sizing sorted out for you. The issue here is that your CSS selector isn't actually targeting the image element correctly, which is why your styles aren't taking effect.

What's going wrong? #

Your current CSS uses .media .img as the selector, but your <img> tag doesn't have an img class on it — it's nested inside a div with the patient class instead. The browser can't find the element you're trying to style, so the rules get ignored.

Fix 1: Use Bootstrap 4's built-in classes (recommended) #

Bootstrap has tons of utility classes to handle image sizing without writing custom CSS. Here are a few easy options:

• Add img-fluid to make the image responsive, then pair it with a max size inline for precise control:

  <img src="{{ asset('images/patient.png') }}" class="img-fluid" style="max-width: 50px; max-height: 50px;">
  

• Or use a fixed-width utility directly if you don't need full responsiveness:

  <img src="{{ asset('images/patient.png') }}" class="w-25">
  

Fix 2: Correct your custom CSS selector #

If you'd rather stick with your own styles, update the selector to target the image inside the .patient div properly:

.media .patient img {
  height: 50px;
  width: 50px;
  object-fit: cover; /* Optional: prevents image stretching, keeps aspect ratio */
}

Your existing HTML for the image can stay exactly as it is — no extra classes needed here.

Quick tip #

Adding object-fit: cover or object-fit: contain to your image styles will help maintain the image's aspect ratio instead of stretching it to fit the fixed dimensions, which makes the end result look much cleaner.

内容的提问来源于stack exchange，提问作者molonized