seo Question posted in
Some basic information to get you started with this can be found here.

Adjust image to content size – SEO

I would like to adjust my images to the size of the content. In some columns the image is too big in comparison to the content. In the following jsfiddle is the example

After several trial and error I can solve the problem by just giving the div containing the image a background-image but I want to avoid this solution as I would like to have an actual image with an alt title for SEO reasons. Here is my desired result (but with an actual image, not a 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>
Tags:

2

Answers


  1. 0

    You could use bootstrap grid system, make it really simple (for sure you could make your own, define the width, but also you need few media query to define width in different screen size)

    Include Bootstrap CSS to your project, or take some source code from it and make your own.

    REF: http://getbootstrap.com/css/#grid

    enter image description here

    .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>
    Login or Signup to reply.
  2. 0

    I hope this is what you are looking for.
    The size of the image could be changed by yourself.
    You can use an image with a src and alt, and can add some information next to it.

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search