Как сделать изображение адаптивным?

Поэтому я пытался изучить более эффективные методы и принципы кодирования веб-сайтов. Я много читал и экспериментировал, и у меня есть новая страница, работающая так, как я понимаю, для адаптивной страницы.

В любом случае, единственная проблема, с которой я столкнулся (насколько я могу судить), заключается в том, что я не могу найти метод, который изменит размер большего изображения до размера, доступного для просмотра на мобильном телефоне с помощью CSS.

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

Я пробовал разные вещи с CSS.

Я не знаю, имеет ли это отношение к Скрытая информация :: Авторизуйтесь для просмотра »
.

HTML

 

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
 margin:0;
 padding:0;
}

img, fieldset {
 border:none;
}

hr {
 display:none;
 /*
 HR in my code are for semantic breaks in topic/section, NOT
 style/presenation, so hide them from screen.css users
 */
}

/* fix for legacy iOS and windows Mobile devices */
@media (max-width:512px) {
 * {
 -webkit-text-size-adjust:none;
 -ms-text-size-adjust:none;
 }
}

/* fix for HDX displays like the Kindle Fire HDX */
@media
 (-webkit-min-device-pixel-ratio:2) and (min-width:1600px),
 (min-resolution:172dpi) and (min-width:1600px)
{
 html { font-size:200%; }
}

body { 
 min-width:55em; /* for pre CSS3 capable browsers */
 font:normal 85%/150% arial,helvetica,sans-serif;
 color:#FFF;
 background: linear-gradient(0deg, #FFF, #000 90%) no-repeat;
}

.heightWrapper {
 background: linear-gradient(0deg, #FFF, #000 90%) no-repeat;
}

h1 { 
 padding-left:2em;
 font-size:100%; /* prevent FF reverse inheritance bug */
 color: #FFF;
}

h1 a {
 position:relative; /* so we can absolute position span over this */
 display:block;
 padding:40px 0;
 /* 40px top + 40px bottom + 64px line-height == image height */
 text-decoration:none;
 font:bold 60px/64px arial,helvetica,sans-serif;
 color:#22B6FA;
}

h1 span {
 position:absolute;
 top:0;
 left:0;
 width: 1275px;
 height: 141px;
 background:url(images/header.jpg) center left no-repeat;
 border-bottom: 1px solid #22B6FA;
}

h2 {
 padding-bottom:1.33em;
 font:bold 175%/145% arial,helvetica,sans-serif;
}

#contentWrapper {
 width:100%;
 float:left;
}

#content {
 padding:2em 0 1em 2em;
 margin-right:26em; /* postitive of #extras negative margin */
}

#extras {
 float:left;
 width:22em;
 padding:2em 2em 1em;
 margin-left:-26em; /* width plus padding */
 /*
 negative margin nulls width in flow, pops it up over
 #contentWrapper
 */
}

h3 {
 padding-bottom: 1em;
 text-align: center;
 font:bold 150%/130% arial,helvetica,sans-serif;
 color: #fff;
}

#product img {
 max-width: 100%;
 display: block;
 margin-bottom: 1em;
}

#productInfo {
 float: right;
 width: 17em;
 padding: 2em 4em 3em 3em;
}

.retail-price {
 color: #fff;
 margin-bottom: 1.5em;
}

.price {
 font-weight: bold;
 font-family: Arial, sans-serif;
 font-size: 2em;
 text-align: center;
 color: #000;
 padding-bottom: 1em;
}

p {
 max-width:56em; /* prevent long lines from being hard to follow */
 margin:0 auto;
 padding: 2em 2em 0 2em;
 font-size: 1.25em;
 color: #000;
}

.testimonial {
 text-align:left;
 max-width:100%;
 margin-bottom:10em;
 padding: 1em;
 font-size: 1em;
 line-height: 1.25em;
 color: #fff;
}

small {
 margin-left: 1.5em;
 font-size: 1em;
 color: #000;
}

#footer {
 padding: 3em;
 text-align:center;
 color: #000;
}

@media (max-width:50em) {
 body {
 min-width:192px; /* CSS3 possible, so let it go narrower */
 }
 #contentWrapper,
 #extras {
 float:none;
 width:auto;
 }
 #content,
 #extras {
 margin:0;
 padding:1em 0.5em 0;
 }
 h2 {
 font:bold 2.5em arial,helvetica,sans-serif;
 padding-bottom:0.66em;
 color: #22B6FA;
 }
 h3 {
 color: #000;
 }
 .testimonial {
 padding-top:1em;
 color: #000;
 border-top:2px solid #22B6FA;
 }
 #product img {
 display:inline-block;
 max-width:49%;
 }
}

@media (max-width:660px) {
 h1 {
 text-align:center;
 padding:0;
 }
 h1 a {
 padding:0.33em 0.167em;
 font:bold 300%/150% arial,helvetica,sans-serif;
 }
 h1 span {
 display:none;
 }
 #product img {
 display:block;
 max-width:100%;
 }
}

@media (max-width:340px) {
 #products {
 width:auto;
 margin:0 auto;
 -webkit-box-sizing:padding-box;
 box-sizing:padding-box;
 }
}

Код (разметка): CSS

  <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1" > <link rel="stylesheet" href="screen2.css" media="screen,projection,tv" > <title> "Death Stalker" Fantasy Knife | CoolFantasyKnives.com </title> </head><body> <h1> <a href="/"> Cool Fantasy Knives <span><!-- image sandbag --></span> </a> </h1> <div class="heightWrapper"> <div id="contentWrapper"><div id="content"> <img src="/images/death_stalker_fantasy_knife.jpg"> <div id="productInfo"> <h2>"Death Stalker" Fantasy Knife</h2> <span class="retail-price">Item #: 002_mc2079</span><br><br> <span class="retail-price">Retail Price: $78.49</span><br><br> <span class="price">Your Price:<br>$59.73</span><br><br> <form target="paypal" action="[URL='https://lumtu.com/yti/YzJJzY3JodHRwczovL3BheXBhbC5jb20vY2dpLWJpbi93ZW39i']https://www.paypal.com/cgi-bin/webscr[/URL]" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="SGEAVGR55XKCC"> <input type="image" src="[URL='https://lumtu.com/yti/acmmcaWZodHRwczovL3BheXBhbG9iamVjdHMuY29tL2VuX1VTL2kvYnRuL2J0bl9jYXJ0X0xHLx0X']https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif[/URL]" border="0" name="submit" alt="PayPal — более безопасный и простой способ оплаты онлайн!"> <img alt="" border="0" src="[URL='https://lumtu.com/yti/acmmcaWZodHRwczovL3BheXBhbG9iamVjdHMuY29tL2VuX1VTL2kvc2NyL3BpeGVsLVGe']https://www.paypalobjects.com/en_US/i/scr/pixel.gif[/URL]" alt="пиксель" width="1" height="1"> </form> </div> <p> The "Death Stalker" fantasy knife has a whopping 14.5" overall length. It features two full tang black stainless steel blades that form the sides and claws. You will appreciate the metal tail with stainless steel stinger blade as well as the rubber coated handle and metal forearm plate. A beautiful wood display stand is also included with this attention-grabbing fantasy knife. </p> <!-- #content, .contentWrapper --></div></div> <div id="extras"> <div class="testimonial"> <h3>Testimonials</h3> How many times have you said to yourself, "Conan The Barbarian invited me to pillage with him, but I have absolutely NOTHING to wear!" Well not any more! With the Scorpion Blade Arm Gauntlet, you will gain the admiration of your fellow death-stalkers, even if you wear little else. Its many claws and pincers are eager to do your bidding, dispatching justice across the barren wasteland, collecting the skulls of your enemies. I got mine, and right away took it to the priestess to be cursed with the blood of eleven slave virgins, so that none may ever take it from me. It has since become the best extension to my already muscle-bound arm I've ever had! And I wore The Gauntlet Of True Terror for 3 years!! In closing, woe-betide! anyone who comes ill prepared for battle. But with this accessory, you'll make the other barbarians feel under-dressed! And the price won't sting your wallet.<br> <small>By: Joseph A.</small> <!-- .testimonial --></div> <!-- #extras --></div> <!-- .heightWrapper --></div> <div id="footer"> <hr> &copy; 2016 &bull; CoolFantasyKnives &bull; All Rights Reserved <!-- #footer --></div> </body></html> 

Код (разметка):

Какие-либо предложения?

Ян08, спасибо за ваш вклад, и если вы посмотрите http://coolfantasyknives.com/death_stalker_fantasy_knife.html

(на что я ссылался в своем предыдущем посте), вы можете увидеть, что и как используется изображение. Ваше здоровье . . .

Хорошо, я предлагал не набирать CSS типа #product img — это было обобщение, что это БЫЛО изображением продукта.

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

Если вы хотите, чтобы все изображения вели себя одинаково, просто выполните img {}

Спасибо за ваше предложение, WebDev, но я откажусь от начальной загрузки.

Я предпочитаю научиться программировать самостоятельно, независимо от того, сколько времени это займет.

Мне нужен полный контроль над моими веб-сайтами, и я не думаю, что вы сможете получить это с помощью начальной загрузки.

Я предпочитаю сводить количество строк кода к минимуму, и похоже, что начальная загрузка раздувает его гораздо больше, чем необходимо, хотя он пытается быть всем для всех. Спасибо, в любом случае . . .

Спасибо, PoPSiCle.

Я мог бы поклясться, что попробовал это.

В любом случае, я изменил код #product img, чтобы он выглядел так:

#product изображение {

ширина: 100%;

максимальная ширина: 600 пикселей;

дисплей: блок;

поле-дно: 1em;

}

Я предполагаю, что вы предлагаете именно это, но по какой-то причине это не работает.

В исходном HTML-коде я просто закодировал img src без каких-либо стилей.

Итак, поскольку вы предложили мне изменить #product img, я обернул img src в div #product img, и это, похоже, тоже не сработало.

И, к вашему сведению, страницу, для которой это предназначена, можно увидеть по адресу http://coolfantasyknives.com/death_stalker_fantasy_knife.html

Что я обнаружил, что это работает, так это то, что если я выполняю стили ширины и максимальной ширины в строке, все работает нормально, и все нормально изменяется. Я удалил изображение div #product из HTML и заменил его на



и это работает отлично, и выглядит так, как я хотел на рабочем столе, и настолько маленьким, насколько я могу изменить размер экрана своего ноутбука.

Теперь, если я изменю изображение продукта, чтобы оно выглядело так:

#product изображение {

ширина: 100%;

максимальная ширина: 600 пикселей;

}

и если я оберну img src в #product img . . . он не работает там, где мой #productInfo отображается на рабочем столе, но отлично выглядит на самом маленьком экране, который я могу получить на своем ноутбуке.

Что я делаю не так?

Результаты не имеют для меня никакого смысла, и я очень надеюсь, что объяснил все это так, чтобы вы могли понять (это был очень, очень длинный день). Я пытаюсь научиться делать это правильно, но это расстраивает.

Еще раз спасибо за ваш вклад, и я с нетерпением жду возможности узнать, что я делаю неправильно.

Я только что попробовал обернуть изображение с помощью , добавив код CSS #product img { width: 100%; максимальная ширина: 600 пикселей; } и удалив встроенный стиль изображения. И дела тоже идут нормально.

Ну, в зависимости от того, для чего предназначено это изображение (изображение продукта?), используйте проценты для определения ширины и установите максимальную ширину в пикселях фактической ширины изображения (чтобы оно не становилось слишком большим при высоком разрешении)?

Извините, ПопсиКл. Я неправильно понял (представьте себе... лол). Я хочу, чтобы такое поведение отображалось для всех изображений продуктов, поэтому я выбрал стиль img {}. Еще раз, господа, большое спасибо за помощь. . .

Разрешите предложить вам перечитать мой предыдущий пост.

В этом посте вы увидите, что мне удалось изменить размер изображения с помощью встроенного стиля, и что предложение, предложенное PoPSiCle, похоже, не сработало.

Я объяснил, что я пробовал, и спрашиваю, почему единственное, что сработало, — это встроенный стиль, хотя вместо этого должно было сработать предложение PoPSiCle. Ваше здоровье . . .

Попробуйте максимально упростить код и поместить его в JSFiddle.

Тогда другим будет намного проще помочь вам в отладке.

Вообще говоря, когда мы хотим, чтобы размер изображения изменялся автоматически, мы устанавливаем для его CSS значение:

 width: auto; /* this line is needed only if the img tag has the width attribute */
max-width: 100%;
height: auto; /* this line is needed only if the img tag has the height attribute */
max-height: 100%;

Код (CSS): сообщите нам, где и при каких условиях используется ваше изображение, чтобы мы могли предоставить более точную помощь.