Калі памер будзе паказаны ў HTML?

Я памятаю, гэта было даўно лепшая практыка кадуецца шырыні і вышыні для любога малюнка (як правіла, так яно выдзелена адпаведнае колькасць прасторы падчас загрузкі), але ў цяперашні час большасць людзей на высокай хуткасці і рэчаў у цэлым больш дынамічным, чым з'яўляецца лепшай практыкай для гэтага ? Ці з'яўляецца ён па-ранейшаму аддаюць перавагу, што любое змесціва выявы маюць убудаваны памер ўсталяваць з HTML?

1

8 адказы

Гэта не мае значэння, калі вы ўсталюеце памер з дапамогай атрыбутаў HTML або ў табліцы стыляў, але вы ўсё роўна павінны паказаць памер для малюнкаў.

Eventhough малюнкаў загружаюцца нашмат хутчэй, у цяперашні час, па-ранейшаму існуе прыкметная затрымка паміж старонкай адлюстровываюцца і малюнкі ўсплывалі. Гэта ўсё яшчэ раздражняе, калі макет старонкі зменіцца ў той час як выявы загружаюцца.

2
дададзена

Я проста адказаў падобнае пытанне на Wordpress Stack біржы, а таксама на вэб-майстроў Stack. Я адпраўляю яго тут маючы намер растлумачыць і дапамагчы большай колькасці людзей. (Адміністратары/мадэратары: калі гэта не дазволена, дайце мне ведаць, як правільна дапамагчы).

<�Р> на самой справе не азначае, што неабходна ўказаць шырыню і вышыню ў HTML. Што гэта азначае, што ты павінен рэзервовы тэ належнае месца і, калі малюнак загружаецца, браўзэр doens't прыйдзецца перафарматаваць і перафарбоўваць старонку. </Р>      <�Р> Акрамя таго, калі вы жорстка памеры, гэта віды паражэнняў спагадлівага паводзін. Калі макет не рэагуе, гэта нармальна, але калі вы хочаце захаваць некаторую спагадлівасць, вы маглі б выкарыстоўваць толькі CSS для дасягнення вынікаў.      <�Р> Большасць часу, выкарыстоўваючы як шырыню і Max-шырыня: 100 будзе рабіць сваю працу, але гэты пост ад Smashing Magazine мае цікавую тэхніку: замест таго, каб выкарыстоўваць максімальную шырыню: 100%, вы можаце выкарыстоўваць Абіўка -Bottom Hack      <�Р> "З дапамогай тэхнікі, мы вызначаем вышыню ў якасці меры ў адносінах да шырыні. Перацяжка і краях маюць такія ўласныя ўласцівасці, і мы можам выкарыстоўваць іх для стварэння прапорцый для элементаў, якія не маюць ніякага ўтрымання ў іх.   Паколькі пракладка мае гэтую магчымасць, мы можам усталяваць дапаўненне-дно, каб быць адносна шырыні элемента. Калі мы таксама ўстанаўлівае вышыню роўныя 0, мы атрымаем тое, што мы хочам. [...]      <�Р> Наступны крок павінен змясціць малюнак ўнутры кантэйнера і пераканайцеся, што ён запаўняе кантэйнер. Каб зрабіць гэта, нам трэба размясціць малюнак абсалютна ўнутры кантэйнера, напрыклад, так: "
.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
2
дададзена

Так, гэта ўсё яшчэ пераважней.

Шмат людзей не на высокіх хуткасцях злучэння, а таксама мабільны становяцца ўсё больш распаўсюджанай з'явай.

1
дададзена

Яго заўсёды лепш выкарыстоўваць CSS

Вы можаце жорстка вышыню малюнка і шырыню, як гэта

.myimg img {
width: 10px;
height: 10px;
}
0
дададзена
шмат людзей кажуць, каб выкарыстоўваць CSS. А што ў сітуацыях, калі выявы з'яўляюцца часткай змесціва і пераменна памеру? б стварыць карыстацкі клас для розных малюнкаў? Мець стабільны класаў памеру малюнка .. (вертыкальныя/гарызантальныя, розныя суадносін бакоў, малы/сярэдні/вялікі), ці проста памер гэтых адзінак у HTML?
дададзена аўтар Damon, крыніца

ваш файл сам вобраз павінен быць памер вы хочаце, каб адлюстраваць, як, па большай частцы, калі занепакоеныя павольнай загрузкай асабліва! калі ў вас ёсць 500x800 пікс, што вы толькі хочаце, каб паказаць, як 100x200, маштабаваць яго ўніз! памер файла будзе значна менш, таму ён будзе загружацца хутчэй :)

0
дададзена
ўвогуле так, хоць шмат новых адчувальных метадаў не патрабуюць гэтага (хоць вы ўсё яшчэ хочаце быць не больш, чым гэта абсалютна неабходна)
дададзена аўтар Damon, крыніца

Ён не павінен быць инлайн - вы можаце зрабіць гэта ў вонкавым CSS. Некаторыя старыя браўзэры, калі не паказаць памер, проста будзе ставіцца да яе як 0px;

0
дададзена

Я б сказаў, так, калі вы хочаце, каб пераканацца, што белае прастору ўключана ў выпадку малюнак не загружаецца ці пры загрузцы дакумента. Але не, калі вы маштабаванне/змяненне памеру малюнка з гэтымі атрыбутамі, як яго непатрэбнай нагрузкі на браўзэр і прыводзіць да скажэння выявы.

0
дададзена

Калі вы распрацоўваеце для сумяшчальнасці крос-браўзэр, то вы павінны па крайняй меры пазначыць вышыню і шырыню ў вашым CSS для самога малюнка. Я выявіў неадпаведнасць паміж FireFox, IE, Opera і г.д., калі памеры не пазначаныя спецыяльна для малюнка. У сувязі з тым, што кожны браўзэр, не кажучы ўжо пра розных версіях, апрацоўваць захаванне стандартаў HTML па-рознаму. Я выявіў, што некаторыя браўзэры будуць рабіць усё магчымае, каб экстрапаляваць намеры HTML дызайнераў, у той час як іншыя толькі крумкаць на першай памылкі. Я хацеў бы таксама рэкамендаваць эм памеры, а не пікселяў або% 's, калі вы збіраецеся на сайце для прагляду з мабільных прылад, такіх як таблеткі. Скажу, аднак, я толькі пачаў гуляць з HTML5, так што я не з-за розніцы ў HTML5 адносна малюнкаў.

0
дададзена