Html 我的缩略图的css问题

我试图在我的项目列表中为我的每个项目创建一个缩略图（请参见我在Illustrator bellow中制作的模型），但我得到的并不完全是我想要的（请参见当前结果：）

守则：

<article class="projet">
    <img src="img/vignette.jpg" alt="paranorium">
    <div class="infoReduit">
        <h2>Paranorium</h2>
        <p>Jeu de survie/horreur fait avec Unity 3D en UnityScript</p>
        <b>Réalisé en 2014</b>
    </div>
</article>


/* line 94, ../sass/projets.scss */
article section .projet {
  width: 55%;
  padding: 10px;
  margin: 30px auto 0;
  background: #f4f5f5;
  border-radius: 10px;
  overflow: hidden;
}
/* line 104, ../sass/projets.scss */
article section .projet img {
  width: 40%;
  vertical-align: text-top;
  border-radius: 10px;
  float: left;
}
/* line 114, ../sass/projets.scss */
article section .projet .infoReduit {
  float: left;
  width: 56%;
  margin-left: 3%;
  background: red;
}
/* line 121, ../sass/projets.scss */
article section .projet .infoReduit h2 {
  font-size: 34px;
  color: #1f1f1f;
  font-family: "Play", sans-serif;
}
/* line 130, ../sass/projets.scss */
article section .projet .infoReduit p {
  font-size: 16px;
  color: #7a717c;
  font-family: "Play", sans-serif;
  margin-top: 5px;
}
/* line 140, ../sass/projets.scss */
article section .projet .infoReduit b {
  font-size: 22px;
  color: #7a717c;
  font-family: "Play", sans-serif;
}

偏执狂
Jeu de survie/horreur fait avec Unity 3D en UnityScript

Réaliséen 2014
/*第94行，../sass/projets.scss*/
第条.项目{
宽度：55%；
填充：10px；
利润率：30px自动0；
背景:#f4 ;；
边界半径：10px；
溢出：隐藏；
}
/*第104行，../sass/projets.scss*/
第条.项目管理{
宽度：40%；
垂直对齐：文本顶部；
边界半径：10px；
浮动：左；
}
/*第114行，../sass/projets.scss*/
文章部分.projet.infoReduit{
浮动：左；
宽度：56%；
左缘：3%；
背景：红色；
}
/*第121行，../sass/projets.scss*/
文章章节.项目.信息发布h2{
字体大小：34px；
颜色：#1F；
字体系列：“播放”，无衬线；
}
/*第130行，../sass/projets.scss*/
文章部分.projet.infoReduit p{
字体大小：16px；
颜色：#7a717c；
字体系列：“播放”，无衬线；
边缘顶部：5px；
}
/*第140行，../sass/projets.scss*/
第节项目信息b{
字体大小：22px；
颜色：#7a717c；
字体系列：“播放”，无衬线；
}

我有两个问题：

-使我的“infoReduit”分区高度：100；不适合这篇文章的高度。我这样做是为了，如果我减小图像大小，“infoReduit”div也会被调整大小

---

-我想将其粘贴到“infoReduit”分区的底部。

将缩略图作为的背景图像，调整分区大小，图像将缩放

给出infoReduit相对定位，并用绝对值粘贴图像div

.infoReduit {
 position:relative;
}
#paranorium {
 width:???;
 height:???;
 position:absolute;
 bottom:0;
 background-imgage:url('img/vignette.jpg');
}

请尝试以下css：

article section .projet{
    display:table;
}
article section .projet img {
    width: 100%;
    vertical-align: text-top;
    border-radius: 10px;
    /* float: left; */
    display: table-cell;
}

article section .projet .infoReduit {
    /* float: left; */
    width: 58%;
    margin-left: 3%;
    background: red;
    height: 100%;
    display: table-cell;
    vertical-align: top;
}

如果有任何问题，请重播给我

---

我找到了解决办法。这是：

<article class="projet">
    <img src="img/vignette.jpg" alt="paranorium">
    <h2>Paranorium</h2>
    <div class="infoReduit">
        <p>Jeu de survie/horreur fait avec Unity 3D en UnityScript</p>
    </div>
    <div class="infoTotal">
        <p>Paranorium est un jeu de survie/horror où vous devez survivre dans un labyrinth remplie de pièges mortels, tout en étant poursuivit par un ennemi malicieux et dangereux que vous ne pouvez ni semer ou tuer...</p>
        <p>Role dans le projet: Directeur Technique</p>
        <p>Technologie utilisée: Unity 3D, UnityScript(Javascript), Maya</p>
        <p>Aptitudes dévelloppées: Communiquation en équipe</p>
    </div>
    <b>Réalisé en 2014</b>
</article>


article section .projet {
  position: relative;
  border: none;
  width: 535px;
  padding: 10px;
  margin: 30px auto 0;
  background: #f4f5f5;
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

article section .projet img {
  width: 180px;
  vertical-align: text-top;
  border-radius: 10px;
  float: left;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -ms-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;
}

article section .projet h2 {
  position: absolute;
  font-size: 34px;
  color: #1f1f1f;
  font-family: "Play", sans-serif;
  right: 0;
  width: 350px;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -ms-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;
}

article section .projet .infoReduit {
  position: absolute;
  color: #7a717c;
  margin-top: 36px;
  right: 0;
  width: 350px;
  opacity: 1;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
  -webkit-transition-delay: 0.25s;
  -moz-transition-delay: 0.25s;
  -o-transition-delay: 0.25s;
  -ms-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

article section .projet .infoReduit p {
  font-size: 15px;
  font-family: "Play", sans-serif;
}

article section .projet .infoTotal {
  opacity: 0;
  position: absolute;
  margin-top: 36px;
  right: 0;
  width: 350px;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  -o-transition-delay: 0;
  -ms-transition-delay: 0;
  transition-delay: 0;
}

article section .projet .infoTotal p {
  font-size: 14px;
  color: #f4f5f5;
  font-family: "Play", sans-serif;
}

article section .projet .infoTotal p:nth-child(2) {
  margin-top: 10px;
}

article section .projet b {
  position: absolute;
  bottom: 10px;
  right: 0;
  width: 350px;
  font-size: 20px;
  color: #1f1f1f;
  font-family: "Play", sans-serif;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

偏执狂
Jeu de survie/horreur fait avec Unity 3D en UnityScript

宿命论者。
项目的作用：指导技术
技术利用率：Unity 3D、UnityScript（Javascript）、Maya

天资：交流与智慧

Réaliséen 2014
第条.项目{
位置：相对位置；
边界：无；
宽度：535px；
填充：10px；
利润率：30px自动0；
背景:#f4 ;；
边界半径：10px；
溢出：隐藏；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
-ms转换：所有0.5s；
-o型过渡：均为0.5s；
过渡：均为0.5s；
}
第条.项目管理{
宽度：180px；
垂直对齐：文本顶部；
边界半径：10px；
浮动：左；
-webkit过渡：宽度0.5s；
-moz过渡：宽度0.5s；
-ms过渡：宽度0.5s；
-o型过渡：宽度0.5s；
过渡：宽度0.5s；
}
第条第2款{
位置：绝对位置；
字体大小：34px；
颜色：#1F；
字体系列：“播放”，无衬线；
右：0；
宽度：350px；
-webkit过渡：宽度0.5s；
-moz过渡：宽度0.5s；
-ms过渡：宽度0.5s；
-o型过渡：宽度0.5s；
过渡：宽度0.5s；
}
文章部分.projet.infoReduit{
位置：绝对位置；
颜色：#7a717c；
边缘顶部：36px；
右：0；
宽度：350px；
不透明度：1；
-webkit转换：所有0.25秒；
-moz转换：所有0.25秒；
-ms转换：均为0.25s；
-o-过渡：均为0.25s；
过渡：均为0.25秒；
-webkit转换延迟：0.25s；
-moz转换延迟：0.25s；
-o-过渡延迟：0.25s；
-ms转换延迟：0.25s；
过渡延迟：0.25s；
}
文章部分.projet.infoReduit p{
字体大小：15px；
字体系列：“播放”，无衬线；
}
文章部分.projet.infoTotal{
不透明度：0；
位置：绝对位置；
边缘顶部：36px；
右：0；
宽度：350px；
-webkit转换：所有0.25秒；
-moz转换：所有0.25秒；
-ms转换：均为0.25s；
-o-过渡：均为0.25s；
过渡：均为0.25秒；
-webkit转换延迟：0；
-moz转换延迟：0；
-o-过渡延迟：0；
-ms转换延迟：0；
过渡延迟：0；
}
文章部分.projet.infoTotal p{
字体大小：14px；
颜色：#F4；
字体系列：“播放”，无衬线；
}
文章部分.projet.infoTotal第n个孩子（2）{
边缘顶部：10px；
}
第二节项目b{
位置：绝对位置；
底部：10px；
右：0；
宽度：350px；
字体大小：20px；
颜色：#1F；
字体系列：“播放”，无衬线；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
-ms转换：所有0.5s；
-o型过渡：均为0.5s；
过渡：均为0.5s；
}

我不太了解您的问题。你想实现什么？我希望我的img保持在左边，div占据剩下的所有空间，但是如果我留下一个边距，它只会在img和div之间留下一点空间，但是div仍然应该占据剩下的空间。所有这些都不需要调整图片的父div和div的大小。最后，用户应该保留其div的底部。最大的问题是。。。好。。。没用了，我找到了解决办法。这是：我尝试了你的解决方案，但仍然有一些问题-在img和div之间有一个空间，我想减少很多。最好的办法是，我的div坚持img，并将父div的所有剩余部分作为他的宽度，左边的边距会稍微推动它，而不会把一切都搞砸-必须粘贴到分区的底部。使用此css作为图像宽度----文章部分。项目img{width:calc（100%-20px）；}请投票给我的答案再次感谢您的帮助，但这不是我要找的。我希望我的img保持在左边，div占据剩下的所有空间，但是如果我放一个