CSS איך אני מקטינה את התמונה שיוצאת מהקוד הזה?

[חנה תהילה]

יש לי קוד להטמעה שיוצר סוג של תמונה כזאת,


אני רוצה להקטין את הגודל של זה, איך אני עושה את זה?
הנה הקוד

<link href="https://awards.infcdn.net/circ_n.css" rel="stylesheet"/><div id="rest_circ" onclick="if(event.target.nodeName.toLowerCase() != 'a') {window.open(this.querySelector('.circ_top_title').href);return 0;}"><div class="circ_cont"><div class="circ_img" style="background: url('https://awards.infcdn.net/img/star_red.svg') no-repeat center">&nbsp;</div><a href="https://restaurantguru.com" target="_blank" class="circ_top_title">Restaurant Guru 2019</a><span>Recommended</span><a href="https://restaurantguru.com/primitibv-Jerusalem" class="circ_bot_title" target="_blank">Primitivo</a></div></div>

תודה רבה

 

[אלעזר 1]

התמונה היחידה בכל האלמנט הזה היא התמונה שלא הצליחה לעבור את הסינון (התמונה של הכוכב מעל הטקסט)
כל השאר זה אלמנטים של HTML עם CSS שיוצר את הצבעים והגדלים, הגופנים וכו'.
מומלץ לפרט יותר לאיזה גודל יעד אתם מכוונים להגיע

 

[אלעזר 1]

אני חושב שהכי קל באמת יהיה לשמור את זה כתמונה ואז הרבה יותר קל לשלוט בגודל

<link href="https://awards.infcdn.net/circ_n.css" rel="stylesheet"/>
<div id="rest_circ" onclick="if(event.target.nodeName.toLowerCase() != 'a') {window.open(this.querySelector('.circ_top_title').href);return 0;}"><div class="circ_cont"

style="
    background: url(&quot;guru.png&quot;) no-repeat center;
    background-size: cover;
    border: 0;
"><a href="https://restaurantguru.com" target="_blank" class="circ_top_title" style="
    flex-grow: 7.5;
"></a><a href="https://restaurantguru.com/primitibv-Jerusalem" class="circ_bot_title" target="_blank" style="
    flex-grow: 2.2;
"></a></div></div>

התמונה (guru.png):

 

[אלעזר 1]

וככה זה נראה בקטן יותר:

<link href="https://awards.infcdn.net/circ_n.css" rel="stylesheet"/>
<div id="rest_circ" onclick="if(event.target.nodeName.toLowerCase() != 'a') {window.open(this.querySelector('.circ_top_title').href);return 0;}" style="
    width: 50px;
    height: 50px;
"><div class="circ_cont" style="
    background: url(&quot;guru.png&quot;) no-repeat center;
    background-size: cover;
    border: 0;
"><a href="https://restaurantguru.com" target="_blank" class="circ_top_title" style="
    flex-grow: 7.5;
"></a><a href="https://restaurantguru.com/primitibv-Jerusalem" class="circ_bot_title" target="_blank" style="
    flex-grow: 2.2;
"></a></div></div>

 

[חנה תהילה]

אני חושב שהכי קל באמת יהיה לשמור את זה כתמונה ואז הרבה יותר קל לשלוט בגודל

קודם כל תודה רבה!
הבעיה שלפי דעתי הם רוצים לקבל קישור מהאתר שלי על השם שלהם,
וגם יש שם שני קישורים שונים, לא הבנתי איך זה יסתדר אם זה יהיה תמונה,
הייתי רוצה שהכל ביחד יהיה בקוטר של 35 פיקסל
ושוב אין לי מילים

 

[Condless]

בלוח בקרה => עיצוב => התאמה אישית => CSS מותאם, להוסיף את הקוד (יתכן וידרש למחוק את ה5 מה-rest_circ):

#rest_circ5 {
    width: 80px !important;
    height: 80px !important;
    font-size: 8px !important;
}

#rest_circ5 .circ_top_title, #rest_circ5 .circ_bot_title {
    font-size: 6px !important;
}

 

[חנה תהילה]

תודה רבה אכן עבד (בלי ה-5)