将图像调整为内容大小

Question

我想调整我的图像大小的内容。在某些列中，与内容相比，图像太大。在下面的小提琴中是一个示例

经过几次尝试和错误之后，我可以通过给包含图像的div一个background-image来解决这个问题，但是我想避免这个解决方案，因为出于SEO的原因，我希望有一个带有alt标题的实际图像。这是我想要的结果(但使用的是实际图像，而不是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>

​

Answer 2

您可以使用引导网格系统，使其变得非常简单(可以确定您自己的宽度，定义宽度，但您也需要很少的媒体查询来定义不同屏幕大小的宽度)

包括引导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>

​