Суреттің өлшемі html-де көрсетілуге ​​тиіс пе?

Естеріңізде болар, бұл кез-келген бейненің қаттылығының ені мен биіктігіне (әдетте ол тиеу кезінде тиісті көлемде бөлінген) ең жақсы тәжірибе болғанын еске түсіремін, бірақ қазіргі уақытта көпшілік адамдармен жоғары жылдамдықпен және жалпы айтқанда, неғұрлым серпінді, бұл үшін ең жақсы тәжірибе қандай ? Мазмұнның кез-келген суреттегі html-ге орнатылған ішкі өлшемі бар ма?

1

8 жауаптар

HTML төлсипаттарын немесе мәнерлер кестесіндегі өлшемді орнатсаңыз маңызды емес, бірақ сіз әлі де суреттердің өлшемін көрсетуіңіз керек.

Қазіргі кездегі суреттер тезірек жүктеледі, әлі де көрсетілетін бет пен суреттер пайда болады. Суреттер жүктеліп жатқан кезде бет орналасуы өзгерген кезде, ол әлі күнге дейін тітіркендіреді.

2
қосылды

Мен Wordpress Stack Exchange-дағы және Webmaster Stack-дегі ұқсас сұраққа жауап бердім. Мен мұнда көп адамға түсініктеме беруге және көмектесуге ниет білдіремін. (әкімшілер/модераторлар: егер бұл рұқсат етілмесе, көмектесудің дұрыс жолын білуге ​​рұқсат беріңіз).

шын мәнінде html-де ені мен биіктігін көрсету керек дегенді білдірмейді. Бұл дегеніміз, сіз дұрыс кеңістікті резервке қойып, сурет жүктелген кезде, браузер бетті қайта бастауға және қайта бояуға тиіс.

     

Сонымен қатар, егер сіз өлшемдерді қатаң кодтасаңыз, онда ол жауапты мінез-құлық түрлеріне ұшырайды. Егер сіздің орналасуыңыз жауап бермесе, ол жақсы, бірақ сіз кейбір жауапты болуды қаласаңыз, нәтижелерге қол жеткізу үшін CSS-ды ғана пайдалана аласыз.

     

Ені мен max-width: 100 екеуін де пайдаланатын көп уақыт жұмыс жасайды, бірақ

this post қызықты техникаға ие: максималды енін пайдаланудың орнына: 100%, The Padding -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 дизайнерлерінің ниетін экстраполяциялау үшін барлық мүмкіндікті жасайды, ал басқалары алғашқы қателіктерге барады. Сондай-ақ, веб-сайтты планшет сияқты мобильді құрылғыдан көруге ниеттесетін болсаңыз, егер сіз пиксель емес,%, сондай-ақ, em өлшемдерін ұсынатын болар едім. Дегенмен, мен HTML5-мен ойнап бастадым, сондықтан HTML5-де бейнелерге қатысты айырмашылықтар жоқ.

0
қосылды