0

введите сюда описание изображениявведите сюда описание изображения`

                 .block{
			position: relative;
			border: 3px	solid #000;    			
		}
		.block-img{
			position: relative;
			border:  2px solid red;
		}
		.block-img img{
			position: absolute;
                        max-width: 100%;
		}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>		
	</style>
</head>
<body>
	<div class="block">
		<h2>Купить самогонный аппарат Luxstahl</h2>
		<div class="block-img">
			<img src="https://luxstahl.com/img/buy-alcohol-mashine-luxstahl.jpg">
		</div>
	</div>	
</body>
</html>

`

Купить самогонный аппарат

Не могу запихнуть картинку в блок - все время выезжает снизу. Нужно картинку любого размера запихнуть в блок class=block и чтобы эта картинка сама определяла размеры своего внешнего блока, в котором она находится (block-img), своими естественными размерами. Но при изменении размера своего блока(block-img) - адаптивилась в нем. И далее этот блок с картинкой передвигать в нужное место по основному блоку - class="block". Ломаю голову целый день. Помогите, профессионалы!

7
  • Добавьте может линки на библиотеки стилей, которые юзаете
    – MihailPw
    Commented 30 апр. 2017 в 18:23
  • Пользуйтесь ctrl + m чтобы чтобы показать код на примере его работы
    – Randall
    Commented 30 апр. 2017 в 18:24
  • img{max-width:100%}
    – soledar10
    Commented 30 апр. 2017 в 18:49
  • не помогает вообще никак
    – Proshka
    Commented 30 апр. 2017 в 18:56
  • 1
    Нарисуйте может как это должно выглядеть, желательно в нескольких вариантах (маленький, средний, большой экраны).
    – MihailPw
    Commented 30 апр. 2017 в 19:02

1 ответ 1

1

не знаю так или нет но как вариант пример 100% адаптивный , откроете снипет на весь экран и измените его размеры и увидите ..

* {
  margin: 0;
  padding: 0;
}

img {
  width: 300px;
  margin: 10px;
  float: left;
}

.clear,
.clear:after,
.clear:before {
  content: "";
  display: block;
  clear: both;
}

.post {
  display: table;
  max-width: 700px;
  border: 1px solid red;
  margin: auto;
}

p {
  padding: 10px;
}

@media screen and (max-width:640px) {
  img {
    width: 60%;
    float: right;
  }
  p {
    text-align: center;
    padding: 10px;
    font-size: 16px;
    font-family: arial;
  }
}

@media screen and (max-width:480px) {
  img {
    width: 100%;
    float: none;
    margin: 0;
  }
  p {
    margin: auto;
    text-align: justify;
    padding: 10px;
    font-weight: 500;
    font-size: 14px;
    font-family: sans-serif;
  }
}
<div class="post clear">
  <img src="http://lorempixel.com/400/200/sports/" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet
    ligula. Donec sollicitudin molestie malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla
    porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor
    sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada.
    Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.