当我使用 'a href' 时如何固定宽度和高度百分比？

Question

这是我的代码，但是当我使用 href 到 img 时，我不能固定宽度和高度百分比，所以我该怎么办？

当我使用 'a href' 时如何固定宽度和高度百分比？

这个方法我试过了，还是不行

<div class="card-deck" >
            @forelse($blogs as $blog)
                <div class="card mb-4" >
                    <a href="blog/{{ $blog->id }}"><img src="{{ $blog->image_url }}" class="card-img-top" alt="{{ $blog->title }}" width="90%" height="80%"></a>
                    <div class="card-body" style="width: 500px; height: 200px;">
                        <h5 class="card-title" style="overflow:hidden;display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;white-space: normal;"><a href="blog/{{ $blog->id }}">{{ $blog->title }}</a></h5>
                    </div>
                </div>
                @if($loop->iteration % 2 == 0)
                    <div class="w-100 d-none d-sm-block d-md-none" style="width: 500px; height: 200px;"><!-- wrap every 2 on sm--></div>
                @endif
                @if($loop->iteration % 3 == 0)
                    <div class="w-100 d-none d-md-block d-lg-none" style="width: 500px; height: 200px;"><!-- wrap every 3 on md--></div>
                @endif
                @if($loop->iteration % 4 == 0)
                    <div class="w-100 d-none d-lg-block d-xl-none" style="width: 500px; height: 200px;"><!-- wrap every 4 on lg--></div>
                @endif
                @if($loop->iteration % 5 == 0)
                    <div class="w-100 d-none d-xl-block" style="width: 500px; height: 200px;"><!-- wrap every 5 on xl--></div>
                @endif
            @endforelse
        </div>

enter image description here

Answer 1

发生这种情况是因为 % 宽度和高度的值出现在父容器或可用的显示区域中。

例如：如果你有

<div style="width: 1000px; height: 1000px;">
  <a href="https://a.com">
    <img src="https://picsum.photos/200" alt="aa" width="50%" height="70%" />
  </a>
</div>

因此在上述情况下，图像宽度将为 500px 宽度，因为 1000 像素的 50% 为 500px，高度将为 700px，因为 70% 1000px 是 700px.

因此，请确保您根据其可用的父容器或展示区域指定某些 % 值。

当我使用 'a href' 时如何固定宽度和高度百分比？

how can fixed width & height percentage when I using 'a href'?

html

href