html - 将图像调整为内容大小

Question

我想根据内容的大小调整图片。在某些栏目中，图像与内容相比太大了。在下面jsfiddle就是例子

经过多次尝试和错误后，我可以通过给包含图像的 div 一个 background-image 来解决问题，但我想避免这种解决方案出于 SEO 原因，要有一个带有替代标题的实际图像。这是我想要的结果(但使用的是实际图像，而不是 background-image

.col-4 {width: 33.33%;}
.col-8 {width: 66.66%;}

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

*::before, *::after {
    box-sizing: border-box;
}

[class*="col-"]{
	float: left;
}

.row {
  display: flex;
  flex-flow: wrap;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

#services .row{
	background-color: #1AC4F8;
	margin-bottom: 30px;
}

#services .col-4{
  background-image:url("http://truck-art-project.com/wp-content/uploads/2016/09/CARRUSEL-TRUCK-SIXE_EN.jpg");
  background-size:cover;
}

#services .col-8{
	padding: 20px 20px;
}

#services .col-8 > *{
	color: white;
	margin: 0 0 20px 0;
}

<section id="services">
<div class="row">
  <div class="col-8">
     <h3>Przeprowadzki krajowe i międzynarodowe</h3>
     <p>Nasza firma transportowa oferuje usługi przeprowadzki na terenie całego kraju jak również poza granicami na terenie całej Europy. Prosimy o kontakt w celu otrzymania indywidualnej wyceny.</p>
   </div>
   <div class="col-4"></div>
</div>
<div class="row">
   <div class="col-4"></div>
   <div class="col-8">
      <h3>Taksówka bagażowa</h3>
  </div>
</div>
</section>

Answer 1

希望这就是您要找的。图像的大小可以自己改变。您可以使用带有 src 和 alt 的图像，并可以在其旁边添加一些信息。

body, html {
  background: white;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.item--wrapper {
  background: #EFEFEF;
  padding: 10px;
  border-radius: 5px;
  width: calc(100% - 20px);
  margin-bottom: 5px;
}

.info--wrapper {
  width: calc(100% - 70px);
}

.item--wrapper,
.image--wrapper,
.info--wrapper,
.button--wrapper,
.info--core, 
.item--image {
  vertical-align: middle;
  display: inline-block;
}

.item--image {
  width: 40px;
  height: 40px;
}

.info--core {
  width: calc(100% - 20px);
  padding: 0 10px;
}

<div id="item1" class="item--wrapper">
  <div class="image--wrapper">
    <img src="http://truck-art-project.com/wp-content/uploads/2016/09/CARRUSEL-TRUCK-SIXE_EN.jpg" class="item--image">
  </div>
  <div class="info--wrapper">
    <div class="info--core">
      <h3>Przeprowadzki krajowe i międzynarodowe</h3>
      <p>Nasza firma transportowa oferuje usługi przeprowadzki na terenie całego kraju jak również poza granicami na terenie całej Europy. Prosimy o kontakt w celu otrzymania indywidualnej wyceny.</p>
    </div>
  </div>
</div>
<div id="item2" class="item--wrapper">
  <div class="info--wrapper">
    <div class="info--core">
      <h3>Przeprowadzki krajowe i międzynarodowe</h3>
      <p>Nasza firma transportowa oferuje usługi przeprowadzki na terenie całego kraju jak również poza granicami na terenie całej Europy. Prosimy o kontakt w celu otrzymania indywidualnej wyceny.</p>
    </div>
  </div>
  <div class="image--wrapper">
    <img src="http://truck-art-project.com/wp-content/uploads/2016/09/CARRUSEL-TRUCK-SIXE_EN.jpg" class="item--image">
  </div>
</div>