将图像调整为内容大小

Question

我想将图片调整为内容的大小。在某些列中，与内容相比，图像太大。以下jsfiddle是示例

经过多次反复试验，我可以通过只提供包含图片div的{​​{1}}来解决问题，但我想避免使用此解决方案，因为我希望使用alt获得实际图像SEO原因的标题。这是我想要的结果（但是有实际图片，而不是background-image

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;
}

Answer 1

您可以使用bootstrap 网格系统，使其非常简单（确保您可以自己制作，定义宽度，但您也需要很少的媒体查询来定义不同屏幕尺寸的宽度）< / p>

将Bootstrap CSS包含在您的项目中，或从中获取一些源代码并制作您自己的。

  

参考：http://getbootstrap.com/css/#grid

     

.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-8 {
  padding: 20px 20px;
}

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

#services img {
  width: 100%;
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="services">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <div class="row">
    <div class="col-xs-6 col-sm-8 col-md-10">
      <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-xs-6 col-sm-4 col-md-2">
      <img src="http://truck-art-project.com/wp-content/uploads/2016/09/CARRUSEL-TRUCK-SIXE_EN.jpg" alt="our services">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-md-2">
      <img src="http://truck-art-project.com/wp-content/uploads/2016/09/CARRUSEL-TRUCK-SIXE_EN.jpg" alt="our services">
    </div>
    <div class="col-xs-6 col-sm-8 col-md-10">
      <h3>Taksówka bagażowa</h3>
    </div>
  </div>
</section>

Answer 2

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;