Ist es möglich, die Höhe eines Bildes ansprechbar zu machen (ohne js)?

Question

Ich habe 2 Bootstrap-Spalten. Die linke hat Text, die rechte ein Bild.

Je nach Auflösung ändert sich der Text in der Höhe. Das Bild bleibt auf der gleichen Höhe. Bei hohen Auflösungen wird sich das Bild weit über den Text hinaus erstrecken und bei niedrigen Auflösungen wird der Text weit über das Bild hinausreichen. Mit der img-responsiven Klasse von Bootstrap wird das Bild bei niedrigeren Auflösungen verkleinert. Ich möchte eigentlich die Bildhöhe automatisch mit der Höhe des Textes ändern. Gibt es eine CSS-Möglichkeit, dies zu tun?

what I want it to be

Auf vielfachen Wunsch;) (ich auch schon versucht, es zu Höheneinstellung: auto btw):

<div id="about" class="container-fluid bg-grey"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <h2 id="ab2">Lorem Ipsum</h2> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-8"> 
      <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     </div> 
     <div class="col-sm-4"> 
      <div> 
       <img src="_public/_images/img3.png" alt="img3" class="img-responsive"> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Was Sie wollen, ist nicht ca gefüllte "responsive". Sie möchten, dass das Bild mit dem Text gestreckt wird. Der beste Weg ist, es zu einem Hintergrundbild zu machen. Das Bild, das ich benutze, ist 350x150, wie Sie deutlich sehen können, aber es ist gestreckt, um die 33.333% des horizontalen und 100% vertikalen Raumes zu bedecken.

Allerdings würde ich persönlich nie ein Bild strecken, weil es eines der "Nein Nein" des Designs ist.

#special-background { 
 
    background-image: url(http://placehold.it/350x150); 
 
    background-size: 33.333333% 100%; 
 
    background-position: center right; 
 
    background-repeat: no-repeat; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="about" class="container-fluid bg-grey"> 
 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <h2 id="ab2">Lorem Ipsum</h2> 
 
    </div> 
 
    </div> 
 
    <div class="row" id="special-background"> 
 
    <div class="col-xs-8"> 
 
     <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint 
 
     occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
     laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint 
 
     occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
     laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint 
 
     occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
     laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint 
 
     occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
 
     laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 
    </div>

Answer 2

Ich glaube, Sie wollen, um Text und Bildausschnitt (div) Höhe gleich aussieht in alle Bildschirm ..

How can I make Bootstrap columns all the same height?

und wenn Sie Bild in allen Ansichten Bootstrap-Klassen ausblenden möchten:
unter 767px Verwendung hidden-xs
768px auf 990px ​​Verwendung versteckt-sm
990px ​​zu 1199px Verwendung hidden-md
oben 1199pxpx verwenden hidden-lg

diese Antwort sein kann, wird Ihnen helfen ..