Как выровнять изображение в верхней части адаптивного контейнера?

Я пытаюсь выровнять два адаптивных контейнера подряд. Один из них с изображением внутри установлен на ширину: 100% и высоту: авто. Как выровнять изображение по вертикали в верхней части его родительского адаптивного контейнера?

<div class="top-row">
  <figure class="product-image col-sm-6">
    <img src="http://rastenis.lt/coocoo/image/cache/catalog/Demo/Untitled.Oil%20on%20canvas.45x55%20cm.2011-570x600.JPG" class="img-r" alt="img">
  </figure>
  <article class="description col-sm-6">
    <h1 class="p-heading">ELEPHANTS ARE COMING BACK</h1>
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes </p>
  </article>
</div>

CSS

.top-row {
  width: 100%;
}
figure img {
  width: 100%;
  height: auto;
}

Вот мой пример: https://jsfiddle.net/2sg209o0/


html css responsive
person Community    schedule 06.06.2016    source источник
comment
Введите код в свой вопрос, пожалуйста. Вы видели большое красное предупреждение о связывании с jsFiddle без кода в своем вопросе, но вы подумали, что это не относится ко мне, поэтому я просто выделю несколько случайных слов в качестве кода, чтобы обойти это правило.   -  person j08691    schedule 06.06.2016
comment
Вы точно знаете, что на вашем изображении есть пустое пространство сверху и снизу, не так ли?   -  person DavidDomain    schedule 06.06.2016
comment
Да, я знаю. Вот почему я прошу помощи, как это сделать правильно   -  person    schedule 06.06.2016
comment
@TomasRastenis - я имею в виду пустое пространство внутри изображения. Либо обрежьте изображение, чтобы избавиться от него, либо используйте отрицательные поля, либо абсолютное положение с отрицательными значениями и скрытым переполнением. Но проще всего было бы обрезать изображение.   -  person DavidDomain    schedule 06.06.2016
comment
Спасибо, Дэвид, не знаю, как я это пропустил :)   -  person    schedule 06.06.2016

Ответы (3)


arrow_upward
0
arrow_downward

Ваш пример кода показан здесь: https://jsfiddle.net/2sg209o0/ имеет больше всего правильного кода, который вы ищете. Чтобы проверить это, не стесняйтесь добавлять этот CSS в соответствующие селекторы, чтобы ваш CSS выглядел так:

.top-row {
    width: 100%;
    border:1px dotted blue;
}
figure img {
    width: 100%;
    height: auto;
    border:1px dashed red;
}

Если бы вы щелкнули изображение правой кнопкой мыши и осмотрели элемент, вы увидите, что изображение содержит белые пиксели вверху и внизу. Изображение действительно выровнено по верхнему краю непосредственного контейнера, как вы и просили:

Как выровнять изображение по вертикали в верхней части его родительского адаптивного контейнера?

Однако похоже, что вы просите, чтобы изображение было выровнено по верхнему краю содержащего div, «top-row», вместе с другим содержимым. Для этого вам нужно будет добавить немного больше стиля. А именно, проблема вращается вокруг поплавков и использования вами элемента «Рисунок».

Тегу figure, как и многим другим тегам, присваиваются уже существующие стили из браузера. Один из таких стилей - это маржа. Прочитав приведенный ниже блок кода, не стесняйтесь щелкнуть следующую ссылку скрипта JS для получения окончательного кода в живом примере. Я добавил необходимые стили и обрезал изображение (и поместил его на imgur) для вас. Не стесняйтесь настраивать свои ставки; Я не совсем уверен, какова здесь конечная цель, за исключением некоторой формы демонстрации продукта.

.top-row {
  width: 100%;
  border:1px dotted red; /* to show you top-row's boundaries */
}

figure{
  margin:0 1em 1em 0; /* override browser styles */
  width:50%;   /* give article some room in top-row */
  float:left;  /* floats are powerful tools for layouts and whatnot */
}

figure img {
  width: 100%;
  height: auto;
}

https://jsfiddle.net/pa04oxmt/

Примечание: ваше изображение может выйти за пределы своего контейнера, но я уверен, что вы знаете, как это исправить :) edit: исправлены опечатки и еще много чего

person MassDebates    schedule 06.06.2016

arrow_upward
0
arrow_downward

Я не совсем уверен, что ты хочешь делать. Помогаете ли вы выровнять div в строке или вертикально выровнять изображение в отдельной строке? В последнем случае вы хотите использовать вертикальное выравнивание (http://www.w3schools.com/cssref/pr_pos_vertical-align.asp).

person sahilkmr78    schedule 06.06.2016
comment
Мне нужно совместить изображение с заголовком из контейнера статьи. Пытался использовать display: flex, table и некоторые другие методы, но у меня это не сработало. Все содержимое в .top-row должно быть выровнено вверху. - person ; 06.06.2016

arrow_upward
0
arrow_downward

Проблема с вашим изображением. Измените ссылку на изображение и проверьте еще раз. Ваше изображение содержит верхнюю белую область, логически ваше изображение размещено в верхней части родительского контейнера. Думаю, лучший вариант - обрезать изображение.

person Md. Parvez    schedule 06.06.2016