图像不适合父元素

Question

image 不适合父元素 这是完整的代码 https://jsfiddle.net/601q9j7c/1/

<section class="cards">
<div class="card">
<div class="img-data">
<div clas="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt=""> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i>  March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
<a href="#"> Read more &rarr;</a>
</div>
</div>
</div>
</section>

Answer 1

如果未在 CSS 或<img>标记中设置任何定义的宽度，则无论其容器如何，图像都将以全尺寸显示。这是你的问题。因此，您需要确保图像的最大宽度为其父宽度的 100%。

仅网页

<section class="cards">
<div class="card">
<div class="img-data">
<div clas="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt="" width="100%"> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i>  March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
<a href="#"> Read more &rarr;</a>
</div>
</div>
</div>
</section>

最好的做法是使用 CSS 而不是直接在 HTML 中执行此操作，但您没有在问题中显示任何 CSS。

下面是一个 CSS 示例：

CSS 示例

.bgimg > img {
max-width: 100%;
width: 100%;
height:auto;
}

<section class="cards">
<div class="card">
<div class="img-data">
<div class="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt=""> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i>  March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
<a href="#"> Read more &rarr;</a>
</div>
</div>
</div>
</section>

Answer 2

首先！你的拼写你的类是错误的，这就是为什么图像不合适。 使图像的宽度为100%，其高度是自动的，因此不要拉伸，但是您的图像可能会从父容器中出来，使溢出：隐藏

.cards {
display: flex;
justify-content: center;
}
.card {
width: 60%;
justify-content: center;
display: grid;
grid-template-columns: 50% 50%;
box-shadow: 10px 0px 20px rgba(0,0,0,0.08);
height: 25rem;
}
.img-data {
height: 100%;
z-index: 1;
background-color: salmon;
display: grid;
grid-template-rows: 50% 50%;
}
.bgimg {
overflow: hidden;
}
.bgimg img {
height: auto;
width: 100%;
}

<section class="cards">
<div class="card">
<div class="img-data">
<div class="bgimg"> <img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt=""> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i>  March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
<a href="#"> Read more &rarr;</a>
</div>
</div>
</div>
</section>

Answer 3

这应该有效并且是动态的：

这为图像提供了继承的宽度和高度，这意味着它复制了前一个对象的宽度。它与属性一起提供style="width: inherit; height: inherit;"

.bgimg {
width: 500px; /*Or whatever you want...*/
}
/* this CSS can be directly inserted in a tag with style="width: 500px;"*/

<section class="cards">
<div class="card">
<div class="img-data">
<div class="bgimg"><!--*NOTE: you wrote <div clas="bgimg">(you missed an 's')--><img src="https://cdn.pixabay.com/photo/2015/01/10/16/45/home-office-595476_960_720.jpg" alt="" style="width: inherit; height: inherit;"> </div>
<div class="cardDetails">
<span class="date"><i class="fas fa-calendar-alt"></i>  March 30, 2020 </span>
</div>
</div>
<div class="post-data">
<h1 class="title">Vuestic – Free Vue Admin Template</h1>
<p class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium ullam ratione id nihil quis officia voluptas vitae molestiae provident natus exercitationem, praesentium maiores quo quas ducimus. Voluptatibus debitis ea perferendis?</p>
<div class="cta">
<a href="#"> Read more &rarr;</a>
</div>
</div>
</div>
</section>

希望这有帮助！